Разберем типовой вариант калькулятора, который можно переделать под свой вариант.
Рассмотрим ,как работать с цифрами, с полями для ввода, с расчетом.
Используем input, select и radio.
Структура калькулятора состоит из двух частей.
Первая часть для ввода данных, а вторая для отображения изображения относительно вида товара и итоговая сумма заказа.
Содержание статьи
Пример калькулятора на javascript
Калькулятор
Для составления букета цветов
Выбери данные
Количество цветов:
Количество букетов:
Какие цветы:
Итоговая стоимость:
0 рублей
Второй вариант калькулятора для сайта.
Переменные для калькулятора на сайт в java
Начнем с переменной, которая отображает количество var mCount.
Присвоим класс count от input.
Добавим логирование и посмотрим значение, которое будем вводить в поле, например, количество цветов.
Отлавливаем это значение, когда поле будет изменено, с помощью функции mCount.change и выводим в консоле.
|
1 2 3 4 5 6 |
$(function() { var mCount = $('.count'); mCount.change(function(){ console.log(mCount.val()); }); }); |
Когда пользователь введет в поле количество цветов 7 штук, уберет мышку из фокуса, то в консоле появится значение семь.
Возьмем переменную количества букетов.
Всего будет три варианта. Для этого создадим новую переменную number и в нее сохраняем значение значение select с классом number.
Попробуем получить значение когда меняем number.change количество букетов.
|
1 2 3 4 5 6 7 |
$(function() { var mCount = $('.count'), number = $('.number'); number.change(function(){ console.log(number.val()); }); }); |
Если выбираем 2 букета, то в консоле значение равно два.
Как проверить тип данных при выводе в консоле?
Для этого typeof.
Мы проверим, чтобы понять будем мы складывать цифры или строчки.
Пишем функцию:
|
1 2 3 4 5 6 7 |
$(function() { var mCount = $('.count'), number = $('.number'); number.change(function(){ console.log( typeof number.val()); }); }); |
В консоле мы увидим, что тип данных строка string, это не цифра.
Если мы будем складывать количество роз и количество букетов, то получится склеивание строчек.
Как поменять строку на цифру?
Это просто допишем к значению +number.val () знак плюса.
Потом мы перед каждой переменной будем ставить знак плюса, чтобы корректно складывать и умножать цифры.
|
1 2 3 4 5 6 7 |
$(function() { var mCount = $('.count'), number = $('.number'); number.change(function(){ console.log( typeof +number.val()); }); }); |
Проверяем тип данных в консоле:
Научились приводить строчки к числовым данным.
Как получить значение у выбора цветов?
Сделаем для каждого вида цветов свой коэффициент, который будет умножаться на сумму.
- Для этого присвоим каждому input свой value="n".
- У input зададим имя name="type".
- В javascript зададим переменную type = $('input[name="type"]').
Проверим.
|
1 2 3 4 5 6 7 8 |
$(function() { var mCount = $('.count'), number = $('.number'), type = $('input[name="type"]'); type.change(function(){ console.log( $(this).val()); }); }); |
Считываем данные с checkbox.
Если мы выбираем добавить упаковку к букету, то ставим галочку в checkbox.
Значит прибавляем к сумме стоимость упаковки.
К итоговой стоимости прибавится фиксированная цена.
Если ставим галочка, то берем 250 рублей за упаковку.
Задаем новую переменную project = $('input[type="checkbox"]').
Теперь проверим выбрали мы элемент упаковка или нет project.change.
Если выбран, то сработает функция в кавычках со значением селектора checked равное 250, в другом случае else возвратит цифру 0.
Проверим в консоле браузера, как отработает код java.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { var mCount = $('.count'), number = $('.number'), type = $('input[name="type"]'), project = $('input[type="checkbox"]'); project.change(function(){ if ($(this).is(':checked')){ console.log('250'); }else{ console.log('0'); } }); }); |
Считаем итоговую стоимость товара в калькуляторе.
Каждый раз когда пользователь будет выбирать количество роз, букетов, будет ли упаковка итоговая стоимость должна пересчитываться.
Переменная финальная цена finalprice будет выглядеть:
|
1 2 |
finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); |
Где переменная price это идентификатор у
Итоговая стоимость:
|
1 2 |
<br> <span id="price">0</span> <small>рублей</small> |
Как менять изображение при выборе типа цветов?
|
1 2 3 4 5 |
if ($(this).val()==1){ $('img').attr('src', 'img/herber.png'); }else{ $('img').attr('src', 'img/rose.png'); } |
index.html калькулятора сайта
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="container"> <h3>Калькулятор</h3> <p><small>Для составления букета цветов</small></p> <hr> <div class="row"> <div class="col-md-6"> <div class="calc-wrap"> <h4>Выбери данные</h4> <hr> <p>Количество цветов:</p> <div class="form-group"><input class="form-control count" title="Минимум 5" type="text" value="5" placeholder="5" data-toggle="tooltip" data-placement="top"></div> <p>Количество букетов:</p> <div class="form-group"><select id="" class="form-control number" name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></div> <p> </p> <p>Какие цветы:</p> <div class="form-group"> <div class="radio"><label for=""> <input name="type" type="radio" value="1"> Розы </label></div> <div class="radio"><label for=""> <input checked="checked" name="type" type="radio" value="2"> Герберы </label></div> <p> </p> <div class="togglebutton"><label for=""> <input checked="checked" type="checkbox"> Добавить упаковку </label></div> <p><button class="btn">Рассчитать цену</button></p> </div> </div> </div> <div class="col-md-6"> <div class="calcimg"><img src="img/rose.png" alt=""></div> <h4>Итоговая стоимость:</h4> <p><span id="price">0</span> <small>рублей</small></p> </div> </div> </div> |
Код javascript для калькулятора на лендинг
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(function() { var mCount = $('.count'), number = $('.number'), type = $('input[name="type"]').val(), project = $('input[type="checkbox"]'), price = $('#price'), summ = 400, metr = 80, disan = 0, finalprice = 400; mCount.change(function(){ if ($(this).val() > 5) { $(this).tooltip('destroy'); finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); } else{ $(this).tooltip('toggle'); } }); number.change(function(){ finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); }); $('input[name="type"]').change(function(){ type = $(this).val(); finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); if ($(this).val()==1){ $('img').attr('src', 'img/herber.png'); }else{ $('img').attr('src', 'img/rose.png'); } }); project.change(function(){ if ($(this).is(':checked')){ disan = 250; finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); }else{ disan = 0; finalprice = (+mCount.val() * metr) * +number.val() * +type + disan; price.text(finalprice); } }); price.text('800'); }); |