Калькулятор расчета стоимости натяжных потолков на jQuery

В этой статье мы сделаем простой калькулятор на jQuery. Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.

Писать наш скрипт калькулятора мы будем на примере «расчета стоимости натяжных потолков». Вот так выглядит калькулятор «в живую».

Готовая HTML разметка

  
Рассчет стоимости потолка
	

	

		
			
			
		
		

			
Площадь потолка
			

			
м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);
;

---

---

Поделиться с друзьями

---

Похожие статьи:

Анимация с линиями для текста
Анимация с огнем для текста
Анимация с сердечками для текста
Анимация с конфетти для текста
Анимация с пузырьками для текста
CSS файлы для браузеров EDGE и IE
Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?