Скрипт калькулятора услуг на jQuery
26 Декабря 2014

Скрипт калькулятора услуг на jQuery

Рассмотрим создание простого калькулятора услуг на jQuery на примере услуг по ремонту квартир и дизайна интерьеров.

Для нас главное, чтобы все выглядело красиво, при выборе/изменении параметров сумма услуги должна сразу пересчитываться и обновляться. Принцип расчета стоимости этого скрипта следующий: задается стоимость ремонта 1 кв. м., задаются поправочные коэффициенты, которые увеличивают или уменьшают общую стоимость кв.м.. Далее по формуле с учетом введённой площади и выбранных коэффициентов рассчитывается итоговая сумма.

Живой пример, где можно покликать. Cсылка на скачивание исходников под статьёй.

Поехали.

Коротко пробегусь по скрипту с комментариями.

Раскрываем блок с параметрами по клику с плавной анимацией. Заменяем кнопку <button>рассчитать стоимость</button> на <span class="cur"></span>, в который будет подставляться рассчитанная сумма.

$('.price-button').click(function() {
	var boxPrice = $(this).closest('.col-md-4');

	function hideButton () {
		$(boxPrice).find('.price-button').hide();
		$(boxPrice).find('.footer-price').append('<h4>Итог: <span class="cur"></span> <span class="rub">р. / м.кв.</span></h4>');

	};
	$(boxPrice).find('.box-price').animate({height: '390px'}, {'duration': 500}, {'easing': 'linear'}, hideButton());

});

Визуально выделяем отмеченные параметры, добавляя к ним свой CSS класс .check-param, причем в блоке с параметрами должен быть выделен только один.

$('ul.parametrs li').click(function() {
	var listParam = $(this).closest('ul.parametrs');
	$(listParam).find('li.check-param').removeClass('check-param');
	var elemParam = $(this);
	$(elemParam).addClass('check-param');

	var elemAttr = $(elemParam).attr('data-param');
});

Пишем функцию, которая вычисляет значения введённых и выбранных параметров, рассчитывает сумму по формуле и подставляет в Итог: <span class="cur">1000000</span> рублей. Значение из поля input для ввода площади получаем используя метод .val(). Для вычисления коэффициентов у выбранных параметров используем метод .attr(). При этом у соответсвующих div элементов должны быть прописаны атрибуты data с нужными значениями.

function valParam () {
	var Price = $('.box-filter').attr('data-price'); //получаем стоимость кв.м.
	var roofValue = $('#roof').val();//вычисляем высоту потолков
	var paramValuePol = $('#pol').find('li.check-param').attr('data-param');//вычисляем коээф для пола
	var paramValueSteny = $('#steny').find('li.check-param').attr('data-param');//вычисляем коэфф для стен
	var paramValuePotolok = $('#potolok').find('li.check-param').attr('data-param');//вычисляем коэфф для потолка
	if ($.isNumeric(roofValue)) {//если задана площадь помещения
		if (!$.isNumeric(roofValue)) roofValue = 1;
		if (!$.isNumeric(paramValuePol)) paramValuePol = 1;
		if (!$.isNumeric(paramValueSteny)) paramValueSteny = 1;
		if (!$.isNumeric(paramValuePotolok)) paramValuePotolok = 1;
		var total = Price * roofValue * paramValuePol * paramValueSteny * paramValuePotolok;//формула расчета общей стоимости
		var newTotal = Math.round(total);//округляем
		$('.cur').html(newTotal);
		$('.rub').show();
	};
	
};

Остается повесить обработчик на блок с калькулятор, и при изменении одного из параметров запускать функцию расчета стоимости.

$('.calculator').on('click keyup', valParam);

Демо калькулятора

Рабочий пример со скриптом калькулятора , html версткой и css стилями можно скачать в zip архиве. Скрипт можно легко доработать под свои требования.

Скачать исходники калькулятора услуг бесплатно

Комментарии

Использую в своей работе