В этой статье мы сделаем простой калькулятор на jQuery. Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.
Писать наш скрипт калькулятора мы будем на примере «расчета стоимости натяжных потолков». Вот так выглядит калькулятор «в живую».
Площадь потолка | м2 | |
Фактура | ||
Общее количество углов | шт. | |
Установка люстры | шт. | |
Установка встраиваемого светильника | шт. | |
Обход трубы, уходящей в потолок | шт. |
Рассчет стоимости потолка
Площадь потолка м2 Фактура Общее количество углов шт. Установка люстры шт. Установка встраиваемого светильника шт. Обход трубы, уходящей в потолок шт. Примерная стоимость: 0 руб.
.price{ padding: 20px 20px 0px 20px; min-height: 200px; border-radius: 5px; max-width: 660px; border: 5px solid #fff200; background:#f9f9f9; } .calc_title{ font-size: 28px; color: #ee1d25; margin: 0 0 20px; } .result{ padding: 20px 0 0; margin: 20px 0; font-size: 24px; border-top: 1px solid #e0e0e0; } span.total{ color: #ed1d25; } .calculator input[type="text"], select { padding: 5px 10px; border: 1px solid #ccc; margin-right: 10px; margin-bottom: 10px; }
(function ($) { $(function () { calculate(); jQuery('#calculator input').keyup(function() { this.value = this.value.replace(/[^0-9\.,]/g, ''); this.value = this.value.replace(/[,]/, '.'); }); jQuery('#calculator input, #calculator select').change(function() { calculate(); }); jQuery('#calculator input').keyup(function() { calculate(); }); function calculate() { $('.calculator').each(function(key, val){ calcInputs = {}; $(this).find('input, select').each(function(key, val){ name = $(this).attr('name'); val = $(this).val(); if (!$.isNumeric(val)) { switch (name) { case 'area': val = 1; break; case 'corners': val = 4; break; case 'lamp': val = ''; break; case 'tube': val = ''; break; case 'chandelier-hook': val = ''; break; default: break; } $(this).val(val); } calcInputs[name] = val; }); total = 0; switch (calcInputs.texture) { case 'mat': total += calcInputs.area * 113; break; case 'glossy': total += calcInputs.area * 180; break; case 'satin': total += calcInputs.area * 180; break; case 'fabric': total += calcInputs.area * 900; break; default: break; } // каждый угол total += calcInputs.corners * 40; // установка люстры if (calcInputs['chandelier-hook'] >= 1) { total += calcInputs['chandelier-hook'] * 500; } // установка встраемого светильника if (calcInputs.lamp >= 1) { total += calcInputs.lamp * 350; } // обход трубы if (calcInputs.tube >= 1) { total += calcInputs.tube * 300; } install = calcInputs.area * 170; total += install; total += ' руб.'; jQuery(this).find('span.total').html(total); }); } }); })(jQuery); ;
Если Вам данного калькулятора оказалось недостаточно, то могу предложить свой НОВЫЙ калькулятор натяжного потолка в формате плагина для WordPress с кучей наворотов. Подробности по ссылке
Попробовал установить форму на свой сайт. Она не работает. Подскажите в чем может быть причина. Все разместил на одной странице. Скрипт js разместил между
Заранее спасибо.