Вход

Просмотр полной версии : Сделать калькулятор натяжных потолков


lexapiter25
28.03.2016, 09:45
Нужно сделать калькулятор натяжных потолков как здесь http://www.potolkoff.ru. Интересует цена и срок..

Strongman
28.03.2016, 10:00
Скопипастите оттуда да и все.

<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>

Не забываем ставить "+".

Strongman
28.03.2016, 10:07
И 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');
}
});




});