Калькулятор для сайта: основа основ

Этим материалом я начну серию статей под названием «Калькулятор для сайта». Для примера мы создадим калькулятор по условному простейшему кредиту, но алгоритм действий будет одинаков и для других видов. Сначала создадим простейший калькулятор, а в следующих статьях будем усовершенствовать его.

Итак, с чего практически всегда начинается работа? С дизайна проекта, с макета; с того, как он будет выглядеть. Что у нас требуется для расчета? Сумма кредита, процентная ставка и срок. В итоге мы хотим получить ежемесячный платеж. Повторюсь, все подается в упрощенном виде, нам главное понять - как это все заставить работать, а дополнительные поля и условия легко можно добавить потом самостоятельно.

HTML-код самого калькулятора:

<form action="">
Сумма кредита в рублях:<input type="number" size="7" name="sum" id="sum" min="1" max="9999999" value="1" onchange="inmas()">
Процентная ставка в процентах:<input type="number" size="4" name="proc" id="proc" min="1" max="1000" value="1" onchange="inmas()">
Срок в месяцах:<input type="number" size="4" name="srok" id="srok" min="1" max="1000" value="1" onchange="inmas()">
</form>
Каждый месяц вам придется отдавать:<div id="res" name="res"></div>

На что здесь стоит обратить внимание? Во-первых, мы используем не input type="text", а input type="number" – многие забывают, что есть специальный тег, в котором можно вводить только цифры. Устанавливаем для него пределы и размер. Во-вторых, в форме нет кнопки – результат выдается сразу же, так как мы на эти теги вешаем событие onchange, которое обрабатывается функцией inmas из скрипта ниже. Теперь вам необходимо перед формой вставить такой скрипт на языке javascript:

<script>
function inmas () {
sum = Number(document.getElementById("sum").value);
proc = Number(document.getElementById("proc").value)/100;
srok = Number(document.getElementById("srok").value);
itog = (sum + proc*sum)/srok;
document.all ('res').innerHTML = itog;
}
</script>

Здесь мы сначала получаем значения, а затем вычисляем и выводим в специальный див внизу. Обратите внимание, что мы используем преобразование к числу – создаем объект с помощью Number(). На самом деле это требуется довольно редко, javascript в большинстве случаев корректно сам приводит числа из формы к числам (то есть определяет, что это не строка), но именно в данном случае может возникнуть подобная проблема.

Таким образом, мы создали простейший кредитный калькулятор на javascript. Вот как он работает, можете протестировать:

Сумма кредита в рублях:
Процентная ставка в процентах:
Срок в месяцах:

Каждый месяц вам придется отдавать:

В следующих материалах мы его усовершенствуем, добавим защиту и поэкспериметируем с некоторыми дополнительными функциями. Если же вам требуется сделать калькулятор на сайт или выполнить любую другую работу по сайтам, то я с удовольствием помогу вам. Пишите на почту up777up@yandex.ru или сразу же добавляйтесь в скайп up777up2 – мы сделаем с вашим сайтом все, что угодно.