Четверг, 04 Июнь 2015 00:00

Как сделать онлайн калькулятор?

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

В сети интернет я находил подобные функции расчета, но одни предполагали предоставить интересующую информацию, отправив SMS-сообщение, другие рассчитывали не для моего региона. В итоге, пришлось создавать on-line калькулятор расчета стоимости работ под себя – согласно требований целевой аудитории.

Сразу хотелось бы предупредить, что данная статья будет понятна тому кругу читателей, которые знают азы xHTML и обладают знанием JavaScript. Следовательно, я не буду говорить о том, как интегрировать JavaScript в структуру документа xHTML - мы ведь обладаем необходимыми для этого знаниями, если дочитали данное предложение! Об усидчивости и внимательности так же стоит упомянуть, поскольку пренебрегая этими требованиями, может получится, что на выводе будет 0.

Итак, первое, что нам предстоит сделать – это скелет нашего будущего on-line калькулятора. Для этого в тело документа xHTML добавляем контейнер <form>. Добавить данный контейнер следует для получения комплексной формы обработки данных для формирования итоговых значений расчета. Далее будет ясно, почему добавили данный контейнер.

В форму добавляем скелет таблицы <table>. Количество столбцов и строк – плод вашей фантазии, но для себя я ограничился тремя столбцами:

1) описание вида работ (<td class=”opisanie”>);

2) единица измерения (<td class=”izmerenie”>);

3) значение (<td class=”znachenie”>).

Из приведенного выше 1 и 2 столбцы особого значения для нас с точки зрения функционала калькулятора не имеют, поскольку основные параметры для осуществления калькуляции будут прописываться в столбце 3 «Единица измерения». Я опущу моменты придания стилей как таблице в целом, так и отдельным элементам. Сейчас нас интересует подготовка к заданию алгоритмов калькуляции в JavaScript.

Прежде всего ячейку столбца «Значение» нам нужно превратить в форму ввода данных, для чего в ячейку таблицы прописываем тег <input>

<form>
<table>
<tr>
<td class=”opisanie”> Описание вида работ</td>
<td class=”izmerenie”>Единица измерения</td>
<td class=”znachenie”><input /></td>
</tr>
</table>
</form>

Но, если мы оставим наш <input /> таким же обнаженным, то скорей всего наш калькулятор посчитать ничего не сможет. Поэтому следует добавить необходимые атрибуты, а именно

onchange="this.value=this.value.replace(/[^\d.]/g, '');"

Данный атрибут и его параметр говорят о том, что данные в нашем выделенном для ввода поле можно изменять

onkeyup="var n=this.value.replace(/[^\d.]/g, ''); if(n!=this.value) this.value=n;"

Атрибут необходим для того, чтобы обнулить значение поля ввода, если оно не соответствует условию. Конкретнее напишу ниже.

onmousedown="this.value=this.value.replace(/[^\d.]/g, '');"

Атрибут активирует наше поле ввода, другими словами атрибут позволяет работать с выделенной ячейкой таблицы-калькулятора.

А теперь вношу конкретику, о которой писал чуть выше. Обратите внимание на указанные атрибуты – что у них общего? Верно, это значение

/[^\d.]/g, ''

Именно такая запись в атрибутах событий необходима для того, чтобы сообщить обработчику событий, что в данном поле для ввода следует набирать только цифровые значения, а так же знак деления десятичных дробей. Другими словами, данный параметр не примет к обработке значения, отличные от цифр.

Теперь в <input> добавляем очередные атрибуты

type=”text”

Определяет возможность ввода данных с клавиатуры

value=”0”

По умолчанию в неиспользуемых ячейках проставляется ноль.

И теперь осталось прописать атрибут, который будет непосредственно работать в JavaScript, а именно

name="******"

где вместо ****** прописываем имя ячейки – допускается использование цифр, а так же символов латинского алфавита.

ВАЖНО! Скорей всего у вас будет не один десяток ячеек для калькуляции данных, поэтому стоит название продумывать таким образом, чтобы оно было лаконично и было в тоже время уникальным.

Таким образом наша ячейка «Значение» будет иметь следующий вид

<td class=" znachenie "><input type='text' name="*****" size=”3” onchange="this.value=this.value.replace(/[^\d.]/g, '');" onkeyup="var n=this.value.replace(/[^\d.]/g, ''); if(n!=this.value) this.value=n;" onmousedown="this.value=this.value.replace(/[^\d.]/g, '');" value=”0” /></td>

Но на этом наша работа с документом xHTML в целом и со «скелетом» калькулятора в частности не заканчивается. Чтобы калькулятор выдавал значения, нам следует задать поля и кнопки для вывода результатов.

<input type=”button” value=”Рассчитать” onClick="calculator(this.form)">

<input type=”reset” value=”Обнулить”>

<p>Итого <input type=”text” name=”itog” readonly=”readonly” size=”20” maxlength=”10”></p>

Все эти контейнеры так же помещаются внутри того же тега <form> после закрывающего тега таблицы </table>.

На этом наша работа в xHTML коде завершена – осталось все это заставить работать в JavaScript.

Для этого зададим функцию в JavaScript

function calculator(form)
{
}

А вот теперь нам понадобятся те самые усидчивость и внимание, поскольку стоит пропустить одно значение, и все – считай вы имеете не функционирующий калькулятор на своем сайте.

Для этого в функции calculator(form) необходимо перечислить все наши атрибуты name, которые мы присваивали тегам <input> из ячеек <td class=”znachenie”>.

- <input name=”primer1”>;

- <input name=”primer2”>;

- <input name=”primer3”>;

- <input name=”primer4”>;

- <input name=”primer5”>;

Нам необходимо, чтобы калькуляция из вышеперечисленных ячеек отображалась в <input name=”itog”>, который мы расположили ниже таблицы. Для этого пишем в JS

function calculator(form)
{
primer1 = form. primer1.value*N
}

Например, в данном случае , при заведении некоторого значения в ячейку <td class=”znachenie”><input name=”primer1”></td> оно будет умножаться на некое значение N, которое необходимо задать согласно требований вашего сайта. В моем случае значения N я брал из соответствующих ячеек стоимости работ таблиц прайс-листов моего же сайта.

Аналогичным образом прописываем остальные параметры функции

function calculator(form)
{
primer1 = form. primer1.value*N
primer2 = form. primer2.value*N
primer3 = form. primer3.value*N
primer4 = form. primer4.value*N
primer5 = form. primer5.value*N
}

Но это мы лишь задали параметры функции, когда в соответствующие ячейки xHTML документа вводятся некие значения. Чтобы функция function calculator(form) смогла скалькулировать данные в поле <input name=”itog”> нам нужно прописать некоторые математические операции с данными функции. Поскольку в моем случае требуется узнать итоговую стоимость работ, то мы будем осуществлять операцию сложения

function calculator(form)
{
primer1 = form. primer1.value*N
primer2 = form. primer2.value*N
primer3 = form. primer3.value*N
primer4 = form. primer4.value*N
primer5 = form. primer5.value*N
summa = primer1+primer2+primer3+primer4+primer5
}

ВАЖНО! Даже если у вас, скажем <input name=”primer1”> и <input name=”primer3”> должны умножаться на одно и тоже число N, нельзя в операции сложения прописывать

summa = primer1+primer2+primer1+primer4+primer5

Такая неверная запись приведет к тому, что в итоге вы получите нерабочую функцию, поскольку нарушена последовательность значений, другими словами, в данном случае «от перестановке места слагаемых сумма не меняется» не верно.

А мы завершаем нашу функцию

function calculator(form)
{
primer1 = form. primer1.value*N
primer2 = form. primer2.value*N
primer3 = form. primer3.value*N
primer4 = form. primer4.value*N
primer5 = form. primer5.value*N
summa = primer1+primer2+primer3+primer4+primer5
form.itog.value = summa
}

Вот теперь мы поставили точку в вопросе вывода конечного результата операций нашего калькулятора.

Все, мы сделали наипростейший калькулятор для суммирования некоторых значений. Пример работы аналогичного калькулятора можно посмотреть на моем сайте по ссылке вначале записи. Я хотел было заморочиться сделать полноценный калькулятор, который бы считал не только предварительно заданные значения, но это уже другая история, на которую требуется много времени на освоение.

PS вместо операции умножения вводимого значения в ячейку таблицы калькулятора можно использовать иные математические операции – все зависит от потребностей.

Спонсоры: