Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2016, 09:45
Новичок на форуме
Отправить личное сообщение для lexapiter25 Посмотреть профиль Найти все сообщения от lexapiter25
 
Регистрация: 27.10.2015
Сообщений: 8

Сделать калькулятор натяжных потолков
Нужно сделать калькулятор натяжных потолков как здесь http://www.potolkoff.ru. Интересует цена и срок..
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2016, 10:00
Кандидат Javascript-наук
Отправить личное сообщение для Strongman Посмотреть профиль Найти все сообщения от Strongman
 
Регистрация: 22.03.2016
Сообщений: 132

Скопипастите оттуда да и все.
<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>

Не забываем ставить "+".
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2016, 10:07
Кандидат Javascript-наук
Отправить личное сообщение для Strongman Посмотреть профиль Найти все сообщения от Strongman
 
Регистрация: 22.03.2016
Сообщений: 132

И 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');
		}
	});
	
	

	
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите калькулятор написать дял натяжных потолков:(((( Полинаpolina Общие вопросы Javascript 3 19.02.2015 13:23
Калькулятор натяжных потолков, редактирование xavibeat Общие вопросы Javascript 9 17.04.2014 10:36
Расчет стоимости потолков калькулятор AlexandrOz Общие вопросы Javascript 2 26.01.2014 21:41
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Как сделать подобный табличный калькулятор? ищущий jQuery 5 22.09.2011 09:39