Сайтов в сети с каждым днем становится все больше, да и уровень сервиса становится все выше. Одной из самых распространенных функций является калькулятор онлайн. Ну например Вы зашли на сайт ресторана и выбрали несколько блюд, по мере выбора блюд калькулятор для сайта рассчитывает сумму Вашего заказа и в зависимости от общей суммы заказа высчитывает стоимость доставки – то есть пользователь сразу видит во сколько ему это обойдется. Довольно таки полезная штука получается – а ведь это просто калькулятор.

В том, что штука полезная никто не спорит, но только вот как сделать свой калькулятор знают не все. Сейчас я на простом примере объясню как сделать свой калькулятор за 5 минут.

Калькулятор

<input type="text" id="num1"> + <input type="text" id="num2"> = <span id="result"></span><br>
<input type="button" onclick="calc()" value="Посчитать">

И так поехали, рисуем два input (поля для ввода) типа text , ставим между ними знак “+” – чтобы обозначить что за действие мы делаем, после последнего input ставим знак равно “=” и за ним ставим тег span – в нем мы будем выводить наш результат, ну и конечно кнопку по щелчку по которой мы будем производить расчет.

function calc()
{
  var num1=parseInt(document.getElementById("num1").value);
  var num2=parseInt(document.getElementById("num2").value);
  var res=document.getElementById("result");
 
  res.innerHTML=num1+num2;
}

Теперь давайте разберем код и логику. По щелчку на кнопке мы вызываем функцию calc(), затем задаем три переменных num1, num2, res – для значения 1, значения 2 и результата и присваиваем им значения, которые передаем при помощи обращения к ним через id, document.getElementById( id ).value . Свойство parseInt – служит для перевода данных из строкового типа в целочисленный.

Затем мы производим расчет и выводим результат в наш тег span. Как всегда если что-то не получилось можно посмотреть пример – калькулятор онлайн.