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

Калькулятор расчета стоимости натяжных потолков на jQuery
Javascript & jQuery 0    8890 +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);
;

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


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

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

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

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

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