Сделать калькулятор натяжных потолков
Нужно сделать калькулятор натяжных потолков как здесь http://www.potolkoff.ru. Интересует цена и срок..
|
Скопипастите оттуда да и все.
<div class="kalkulyator"> <div class="head">Калькулятор</div> <form id="calculator" action="#" method="post"> <div class="line"> <div class="line_2_col"><p>Материал</p> <select id="material"> <option value="gla">Глянцевый</option> <option value="mat">Матовый</option> <option value="sat">Сатиновый</option> <option value="matw">Тканевый</option> </select> </div> <div class="line_2_col"><p>Производитель</p> <select id="country"> <option value="ger_pongs">Pongs</option> <option value="chi_msd">МСД</option> <option value="bel_ptsm">PTSM Polyplast</option> <option value="fra_ctn">СТN</option> </select> </div> <div class="clear"></div> </div> <div class="line"> <div class="line_3_col"> <p>Длина (в метрах)</p> <input type="text" name="length" id="length"> </div> <div class="line_3_col"> <p>Ширина (в метрах)</p> <input type="text" name="width" id="width"> </div> <div class="clear"></div> </div> <div class="line"> <div class="line_4_col"> <p>Светильники</p> <select id="lights"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="line_4_col"> <p>Люстры</p> <select id="chandeliers"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="line_4_col"> <p>Трубопроводы</p> <select id="pipelines"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="line_4_col"> <p>Углы</p> <select id="angles"> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="clear"></div> </div> <div class="price_block"> <div class="price">Цена: <span id="price-result"></span> руб. </div> <div class="price-snoska">*цена может варьироваться исходя из сложности работ</div> </div> <p class="calc-btn"><input type="button" id="calc-btn" class="green" value="Рассчитать"></p> </form> </div> Не забываем ставить "+". |
И JavaScript к нему присобачен - файл calc.js. Вот кусок из него(окончание):
var form = $("#calculator"); $.validator.addMethod("mynumber", function (value, element) { return this.optional(element) || /^(\d+|\d+(,|.)?\d{1,2})$/.test(value); }, "Введите число"); $.validator.addMethod("minCustom", function( value, element, param ) { return this.optional( element ) || value.replace(",",".") >= param; }, "Введите число больше 0"); form.validate({ rules: { length:{ required: true, mynumber: true, minCustom: 1 }, width:{ required: true, mynumber: true, minCustom: 1 }, lights:{ required: true, digits: true }, chandeliers:{ required: true, digits: true }, pipelines:{ required: true, digits: true }, angles:{ required: true, digits: true, min: 4 } }, messages: { length:{ required: 'Это поле обязательно', /*number: 'Введите число', min: 'Введите число больше 0'*/ }, width:{ required: 'Это поле обязательно', /*number: 'Введите число', min: 'Введите число больше 0'*/ }, lights:{ required: 'Это поле обязательно', digits: 'Введите число' }, chandeliers:{ required: 'Это поле обязательно', digits: 'Введите число' }, pipelines:{ required: 'Это поле обязательно', digits: 'Введите число' }, angles:{ required: 'Это поле обязательно', digits: 'Введите число', min: 'Кол-во углов должно быть больше 4' } }, submitHandler: function(form) { console.log("it's ok"); } }); var prices = { mat: { ger_pongs: 400, chi_msd: 300, bel_ptsm: 350, fra_ctn: 470 }, sat: { ger_pongs: 400, chi_msd: 300, bel_ptsm: 350, fra_ctn: 470 }, gla: { ger_pongs: 430, chi_msd: 330, bel_ptsm: 380, fra_ctn: 500 }, matw: { ger_descor: 750, fra_clipso: 1470, ita_cerutti: 1550 } }; $('#calc-btn').click(function() { if( form.valid() ){ var material = $("#material").val(); var country = $("#country").val(); var price = prices[material][country]; var length = $('#length').val(); length = parseFloat( length.replace(",",".") ); var width = $('#width').val(); width = parseFloat( width.replace(",",".") ); var lights = $('#lights').val(); var chandeliers = $('#chandeliers').val(); var pipelines = $('#pipelines').val(); var angles = $('#angles').val(); var priceResult = ( length*width*price ) + ( chandeliers*280 ) + ( ( angles-4 )*120 ) + ( pipelines*220 )+ ( ( (length+width)*2 )*200 ) + (lights*450); $('#price-result').empty(); $('#price-result').text(priceResult); $('#calculator tr.price').removeClass('hidden'); $('.price_block div').css('display','block'); }else{ $('#calculator tr.price').addClass('hidden'); } }); }); |
Часовой пояс GMT +3, время: 16:55. |