В этой статье мы расскажем о том, как сделать простейший калькулятор расчета значений.
Вы наверняка видели на некоторых сайтах формы, предлагающие рассчитать стоимость услуг - вставка пластиковых окон, покрытие пола, ремонт машины и так далее.
Все такие калькуляторы расчета стоимости делаются аналогично, всё действие происходит в js-файле. Меняется лишь логика расчетов и зачастую внешний вид самого калькулятор - за место чисел, размеров, вам предлагают кликнуть на на графические элементы (готовые оконные рамы с размерами и так далее).
Сейчас мы сделаем простой калькулятор, который будет выполнять 4 основных действия: сложение, вычитание, умножение и деление. Этот пример призван показать принцип создания таких калькуляторов для расчета стоимости, а не дать вам готовый вариант.
Для этого нам понадобится два текстовых инпута для вводимых чисел - первого и второго, выпадающий список с выбором действия, кнопка "Рассчитать" и поле для результата. Создадим такую разметку:
Не забываем подключить файл стилей, JQuery библиотеку и файл с нашим будущим скриптом.
Далее запишем стили для нашего калькулятора - выравняем всё по центру, закруглим углы у полей, выделим кнопку Расчета и так далее:
Далее запишем сам скрипт, который будет рассчитывать результат:
Тут стоит обратить внимание на 4 и 5 строки - в которых мы получаем значение чисел, над которыми производим расчеты и умножаем их на единицу. Дело в том, что хоть в js нету описания явных типов, но когда мы получаем значения таким образом они считаются как строки (текст) и тогда наши вычисления будут неверными, для этого мы приводим переменные к числовому типу, умножая их на 1 (так это работает).
Ну и конечно же вы видите, что мы не делаем никаких проверок на то, числа ввёл пользователь или белеберду, деление на 0 и другие вещи, всё это при желании можно дописать, но цель этой статьи просто познакомить вас с возможностью создания калькулятора для расчета стоимости или обычного калькулятора.
Работающий пример вы можете посмотреть на Демо-странице:
Скачать результаты примера:
Добавить комментарий
Авторизоваться с помощью: