В этой статье мы сделаем простой калькулятор на jQuery.
Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.
Писать наш скрипт калькулятора мы будем на примере «расчета стоимости натяжных потолков». Вот так выглядит калькулятор «в живую».
Рассчет стоимости потолка
Площадь потолка | м2 | |
Фактура | ||
Общее количество углов | шт. | |
Установка люстры | шт. | |
Установка встраиваемого светильника | шт. | |
Обход трубы, уходящей в потолок | шт. |
Примерная стоимость: 0 руб.
Готовая HTML разметка
<div class="price"> <div class="title">Рассчет стоимости потолка</div> <div id="calculator" class="calculator"> <table> <colgroup> <col width="70%"/> <col width="30%"/> </colgroup> <tr class="required"> <td>Площадь потолка</td> <td><input name="area" type="text" value="10"/></td> <td>м<sup>2</sup></td> </tr> <tr class="required"> <td>Фактура</td> <td colspan="2"> <select name="texture"> <option value="mat">Матовый</option> <option value="glossy">Глянцевый</option> <option value="satin">Сатиновый</option> <option value="fabric">Тканевый</option> </select> </td> </tr> <tr> <td>Общее количество углов</td> <td><input name="corners" type="text" value="4"/></td> <td>шт.</td> </tr> <tr> <td>Установка люстры</td> <td><input name="chandelier-hook" type="text" value=""/></td> <td>шт.</td> </tr> <tr> <td>Установка встраиваемого светильника</td> <td><input name="lamp" type="text" value=""/></td> <td>шт.</td> </tr> <tr> <td>Обход трубы, уходящей в потолок</td> <td><input name="tube" type="text" value=""/></td> <td>шт.</td> </tr> </table> <div class="total"> Примерная стоимость: <span class="total">0 руб.</span> </div> </div> </div>
Оформление калькулятора
.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); ;