Калькулятор на чистом HTML

Всегда думал что HTML это язык гипертекстовой разметки и программировать на нём нельзя?

Вот такой простейший калькулятор можно сделать на чистом HTML. Без использования php или javascript.

Достаточно просто скопировать этот код и вставить в текстовый файл, а потом сохранить документ с расширением html.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Калькулятор</title>
</head>
<body bgcolor="#FFFFB0" text="red">
<form name="calculator">
КАЛЬКУЛЯТОР V.0.1
</br>
<input type="textfield" name="ans" value="">
</br>
<input type="button" value="1" onclick="document.calculator.ans.value+='1'">
<input type="button" value="2" onclick="document.calculator.ans.value+='2'">
<input type="button" value="3" onclick="document.calculator.ans.value+='3'"> </br>
<input type="button" value="4" onclick="document.calculator.ans.value+='4'"> <input type="button" value="5" onclick="document.calculator.ans.value+='5'"> <input type="button" value="6" onclick="document.calculator.ans.value+='6'"></br> <input type="button" value="7" onclick="document.calculator.ans.value+='7'"> <input type="button" value="8" onclick="document.calculator.ans.value+='8'"> <input type="button" value="9" onclick="document.calculator.ans.value+='9'"></br> <input type="button" value="+" onclick="document.calculator.ans.value+='+'"> <input type="button" value="0" onclick="document.calculator.ans.value+='0'"> <input type="button" value="-" onclick="document.calculator.ans.value+='-'"> <input type="button" value="/" onclick="document.calculator.ans.value+='/'"> <input type="button" value="*" onclick="document.calculator.ans.value+='*'"> <input type="button" value="=" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"> <input type="reset" value="Сброс"> </form> </body> </html>

Открыв в браузере мы увидим самый обычный калькулятор, который даже работает. Но на самом деле немного JavaScript’а тут всё же есть. Если присмотритесь, то увидите что у каждой кнопки есть событие onclick, в котором уже выполняется простейший код javascript.

Пример готового калькулятора на HTML

 

КАЛЬКУЛЯТОР V.00.1









А к чему это я всё пишу? Просто попалось на глаза объявление о работе где требовался «программист HTML». Вот может отправить им в качестве тестового задания этот кусок кода? 🙂

4 мыслей о “Калькулятор на чистом HTML

  • 12.03.2021 в 19:47
    Permalink

    Супер!
    Работает отлично, НО вводя текст в окошко телефон перезагружается 😀

    Ответ
  • 11.05.2022 в 19:13
    Permalink

    Молодец и взяли на работу??

    Ответ
  • 18.12.2022 в 16:16
    Permalink

    HTML Калькулятор

    КАЛЬКУЛЯТОР V.00.1

    Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Похожие записи: