Январь 2019
Автор: Рубрика: Верстка Комментариев нет

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

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

Рассмотрим ,как работать с цифрами, с полями для ввода, с расчетом.

Используем input, select и radio.

Структура калькулятора состоит из двух частей.

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

Пример калькулятора на javascript

Калькулятор

Для составления букета цветов


Выбери данные


Количество цветов:

Количество букетов:

 

Какие цветы:

 

Итоговая стоимость:

0 рублей

Второй вариант калькулятора для сайта.

Переменные для калькулятора на сайт в java

Начнем с переменной, которая отображает количество var mCount.

Присвоим класс count от input.

Добавим логирование и посмотрим значение, которое будем вводить в поле, например, количество цветов.

Отлавливаем это значение, когда поле будет изменено, с помощью функции mCount.change и выводим в консоле.

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

Возьмем переменную количества букетов.

Всего будет три варианта. Для этого создадим новую переменную number и в нее сохраняем значение значение select с классом number.

Попробуем получить значение когда меняем number.change количество букетов.

Если выбираем 2 букета, то в консоле значение равно два.

Как проверить тип данных при выводе в консоле?

Для этого typeof.

Мы проверим, чтобы понять будем мы складывать цифры или строчки.

Пишем функцию:

В консоле мы увидим, что тип данных строка string, это не цифра.

Если мы будем складывать количество роз и количество букетов, то получится склеивание строчек.

Как поменять строку на цифру?

Это просто допишем к значению +number.val () знак плюса.

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

Проверяем тип данных в консоле:

Проверяем тип данных в консоле

Научились приводить строчки к числовым данным.

Как получить значение у выбора цветов?

Сделаем для каждого вида цветов свой коэффициент, который будет умножаться на сумму.

  1. Для этого присвоим каждому input свой value="n".
  2. У input зададим имя name="type".
  3. В javascript зададим переменную type = $('input[name="type"]').

Проверим.

Считываем данные с checkbox.

Если мы выбираем добавить упаковку к букету, то ставим галочку в checkbox.

Значит прибавляем к сумме стоимость упаковки.

К итоговой стоимости прибавится фиксированная цена.

Если ставим галочка, то берем 250 рублей за упаковку.

Задаем новую переменную project = $('input[type="checkbox"]').

Теперь проверим выбрали мы элемент упаковка или нет project.change.

Если выбран, то сработает функция в кавычках со значением селектора checked равное 250, в другом случае else возвратит цифру 0.

Проверим в консоле браузера, как отработает код java.

Считаем итоговую стоимость товара в калькуляторе.

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

Переменная финальная цена finalprice будет выглядеть:

Где переменная price это идентификатор у

Итоговая стоимость:

Как менять изображение при выборе типа цветов?

index.html калькулятора сайта

Код javascript для калькулятора на лендинг

Комментариев нет

Комментарии запрещены