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

Калькулятор расчета стоимости натяжных потолков на jQuery
Javascript & jQuery 0    1966 +1

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

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

Рассчет стоимости потолка
Площадь потолка м2
Фактура
Общее количество углов шт.
Установка люстры шт.
Установка встраиваемого светильника шт.
Обход трубы, уходящей в потолок шт.
Примерная стоимость: 0 руб.

Готовая 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);
;

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

Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?
Скролинг страницы вверх и вниз по клику на кнопку
Parallax эффект для одиночного элемента с библиотекой RELLAX
Плавная прокрутка страницы после нажатия на якорную ссылку
jQuery анимация для сайта - эффекты появления DIV блоков

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte