Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.08.2015, 00:40
Новичок на форуме
Отправить личное сообщение для letema88 Посмотреть профиль Найти все сообщения от letema88
 
Регистрация: 20.08.2015
Сообщений: 6

Калькулятор на сайт
Приветствую всех, друзья! Кто может помочь, я начинающий программист.
Возникла задача написать простенький калькулятор для сайта продающего фотообои. Чтоб клиент вводил высоту и ширину обоев в квадратных метра, выбирал материал и итог уже выводился в погонных метрах, т.к. у каждого материала разные погонные метры. Я нашел подходящий скрип, подпилил под нужды, но не могу сделать, чтоб квадратные метры переводились в погонные для каждого материала, когда пользователь кликал на нужный ему материал. Вот код, может кто подскажет как это сделать?
<section class="section">
        <div class="container">
            <p class="h1 text-center">Калькулятор расчета стоимости услуг</p>
            <div class="small-line"></div>
            <div class="row price">
                <div class="col-md-4 col-md-offset-4">
                    <div class="list-group calculator">
                        <div class="list-group-item name-price"><h3>Стоимость печати</h3></div>
                        <div class="list-group-item box-price">
                            <div class="box-filter" data-price="1000">
                                <div class="form-group">
                                    <label>Площадь фотообоев</label>
                                    <div class="row">
                                        <div class="col-md-4" style="padding-top: 14px;">В метрах:</div>
                                        <div class="col-md-3"><input type="text" name="roof" class="form-control" id="roof" value="" placeholder="0">   ш</div>
										<div class="col-md-3"><input type="text" name="roof1" class="form-control" id="roof1" value="" placeholder="0">  в</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Материал</label>
                                    <ul class="parametrs" id="pol">
                                        <li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "под иней")</li>
                                        <li class="label label-default" data-param="1.1">Бумажные фотообои с ПВХ покрытием (текстура "под древний папирус")</li>
                                        <li class="label label-default" data-param="1.2">Бумажные фотообои с ПВХ покрытием (текстура "под текстиль")</li>
                                        <li class="label label-default" data-param="1.4">Бумажные фотообои с ПВХ покрытием (текстура "живопись маслом")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "песок")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "лен")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "влажная штукатурка")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "штукатурка")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "мелкий песок")</li>
										<li class="label label-default" data-param="1">Бумажные фотообои с ПВХ покрытием (текстура "гладкая")</li>
                                    </ul>
									 <ul class="parametrs" id="fliz">
                                        <li class="label label-default" data-param="1">Флизелиновые фотообои (текстура "венецианская штукатурка")</li>
                                        <li class="label label-default" data-param="0.95">Флизелиновые фотообои (текстура "штукатурка")</li>
                                        <li class="label label-default" data-param="1.15">Флизелиновые фотообои (текстура "штукатурка")</li>
                                        <li class="label label-default" data-param="1.2">Штукатурка с покраской</li>
                                    </ul>
                                </div>
                               
                               
                            </div><!-- /.box-filter -->
                        </div>
                        <div class="list-group-item footer-price">
                            <button type="button" class="btn-outlined btn-lg btn-default price-button">Рассчитать стоимость</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

$(document).ready(function () {
	
	
	$('.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: '550px'}, {'duration': 500}, {'easing': 'linear'}, hideButton());

	});

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

	
	function valParam () {
		var Price = $('.box-filter').attr('data-price'); 
		var roofValue = $('#roof').val();
		var roofValue1 = $('#roof1').val();
		var roofValue2 = roofValue * roofValue1;
		
		var paramValuePol = $('#pol').find('li.check-param').attr('data-param');
		var paramValueSteny = $('#steny').find('li.check-param').attr('data-param');/
		
		if ($.isNumeric(roofValue2)) {
			if (!$.isNumeric(roofValue2)) roofValue2 = 1;
			if (!$.isNumeric(paramValuePol)) paramValuePol = 1;
			if (!$.isNumeric(paramValueSteny)) paramValueSteny = 0;
			
			var total = Price * roofValue2 * paramValuePol + paramValueSteny;//формула расчета общей стоимости
			var newTotal = Math.round(total);//округление
			$('.cur').html(newTotal);
			$('.rub').show();
		};
		
	};
	
	$('.calculator').on('click keyup', valParam);

})

Например у флизилиновых обоев погонный метр 0,75, а у ПВХ 1,3
Вот примерная формула = Ширина/ширина материала*высота(высота в метрах квадратных)*цена. Как в JS менять параметр "ширина материала" при выборе нужного значения пользователем.
Подскажите пожалуйста, заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 20.08.2015, 05:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

С вашим калькулятором итог будет как в анекдоте:
- У соседей такая же квартира, спроси сколько обоев они покупали.
После оклейки:
- Что же вы сволочи сказали, что 15 рулонов, у нас 5 осталось?!
- Все правильно, у нас тоже 5 осталось.

В сети же много описано как посчитать количество рулонов, и далеко не ширина/ширина * высота ....
Ответить с цитированием
  #3 (permalink)  
Старый 20.08.2015, 18:19
Новичок на форуме
Отправить личное сообщение для letema88 Посмотреть профиль Найти все сообщения от letema88
 
Регистрация: 20.08.2015
Сообщений: 6

Нет, такой калькулятор не пойдет. Мы занимаемся печатью фотообоев, важно, чтоб клиент вводил метры, а ему цена вводилась в погонных метрах. Это нужно для сайта.
Ответить с цитированием
  #4 (permalink)  
Старый 20.08.2015, 18:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от letema88
важно, чтоб клиент вводил метры, а ему цена вводилась в погонных метрах.
Это как 2 000 не рублей, а метров?

тогда поясните что значит за погонные метры, что это в итоге означает, а то я не понимаю:

Сообщение от letema88
Например у флизилиновых обоев погонный метр 0,75, а у ПВХ 1,3
Вот примерная формула = Ширина/ширина материала*высота(высота в метрах квадратных)*цена. Как в JS менять параметр "ширина материала" при выборе нужного значения пользователем.
Ответить с цитированием
  #5 (permalink)  
Старый 20.08.2015, 18:58
Новичок на форуме
Отправить личное сообщение для letema88 Посмотреть профиль Найти все сообщения от letema88
 
Регистрация: 20.08.2015
Сообщений: 6

Погонный метр это ширина рулона, они бывают 0,75, 1,3, 1,5 метра. Клиент вводит допустим 3м. ширина, 2 м. высота. Нужно расчитать сколько будет полотен, например по 1,3, только в цене. Высота полотна может быть любая, а вот ширина ограничена. Как то так
Ответить с цитированием
  #6 (permalink)  
Старый 20.08.2015, 19:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от letema88
Погонный метр это ширина рулона, они бывают 0,75, 1,3, 1,5 метра. Клиент вводит допустим 3м. ширина, 2 м. высота.
3 м ширина это имеется ввиду заклеить на стене 3 метра, при высоте потолка 2 м (так?), и получить длину полотен - а это что? Обычно обои в рулонах, которые имеют длину, это имеется ввиду?
Ответить с цитированием
  #7 (permalink)  
Старый 20.08.2015, 20:52
Новичок на форуме
Отправить личное сообщение для letema88 Посмотреть профиль Найти все сообщения от letema88
 
Регистрация: 20.08.2015
Сообщений: 6

3 метра это ширина зоны для оклейки 2 это высота. Сколько нужно материала, если ширина одного полотна 1,30, а высота 2. В данном примере погонный метр - это ширина 1,30 высота метр. Сколько таких погонных метров будет на оклеемой площади, результат будет округлятся в большую сторону
Ответить с цитированием
  #8 (permalink)  
Старый 21.08.2015, 03:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ширина/ширина материала*высота(высота в метрах квадратных)*цена

Как может быть высота в квадратных метрах? И потом где фигурируют эти данные - Погонный метр это ширина рулона, они бывают 0,75, 1,3, 1,5 метра.? Ведь вместо них в data-param от макс. 1.4 до мин. 0.95 - это что такое? Причем это потом присваивается переменным с какими-то "дикими" именами не понятно о чем говорящими - paramValuePol, paramValueSteny

( (Ширина оклеиваемой поверхности / ширина материала) * высота оклеиваемой поверхности ) - это получили длину в метрах. Правда все мы знаем, что тютя в тютю обои обрезать не получится, так как придется выравнивать их по рисунку, а не там где отрезал, там и срослось.
Но как бы то ни было посчитали длину, посчитали правильно?
Теперь чтобы получить цену, нужно знать единицу цены за 1 метр каждого из материалов.

Вот эти параметры - ширина материала, цена за 1 метр и должны содержать в себе элементы, и лучше это делать выпадающим списком, а не ul + li. Это можно использовать кастомизированный список, в котором для красоты пользователю подсовывают его "заместителя" ul + li, но "в тени" работает все таки список. А он в значениях своих должен содержать не цены или ширину материала, а идентификатор материала, ибо как не считай на клиенте, а окончательный расчет всегда за сервером, не зависимо от того что там на клиенте считалось.

Допустим, для примера, здесь опции содержат параметр, в котором указана ширина материала и цена за метр:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    //в полях ввода только цифры и без ведущего нуля
    //если можно вводить не целые значения, то надо разрешить ввод точки или запятой
    $('input').keyup(function() {
        this.value = this.value.replace(/^0|\D/,'')
    });
    //расчет
    $('button').click(function() {
        var W = $('#width_area').val(), H = $('#height_area').val(), p = $('#wallpaper'), v = p.val(), d = p.find(':selected').data('check');
        if(!W || !H || !v) {
            alert('Не выбраны параметры!')
            return
        }
        //считаем по-детально
        $('#details').html('Ширина материала: ' + d[0] + ' м<br>' +
                           'Цена за метр: ' + d[1] + ' руб.<br>' +
                           'Требуется полос: ' + Math.round(W / d[0]) + ' шт.<br>' +
                           'Всего метров: ' + Math.round((W / d[0]) * H) + ' м<br>' +
                           'Итоговая цена: ' + Math.round((W / d[0]) * H * d[1]) + ' руб.');
    })
});
</script>     
</head> 

<body>
Материал:
<form autocomplete="off">
<select id="wallpaper" name="" required="">
    <option value="">Выберите материал...</option>
    <optgroup label="Бумажные фотообои с ПВХ покрытием - ширина 1.3 м">
        <option value="121" data-check="[1.3,25]">Текстура "под иней"</option>
        <option value="234" data-check="[1.3,20]">Текстура "под древний папирус"</option>
        <option value="123" data-check="[1.3,32]">Текстура "живопись маслом"</option>
        <option value="11" data-check="[1.3,40]">Текстура "песок"</option>
    </optgroup>
    <optgroup label="Флизелиновые фотообои - ширина 0.75 м">
        <option value="324" data-check="[0.75,55]">Текстура "венецианская штукатурка"</option>
        <option value="333" data-check="[0.75,40]">Текстура "штукатурка"</option>
        <option value="434" data-check="[0.75,35]">Текстура "штукатурка"</option>
    </optgroup>
</select>
<hr />
Ширина поверхности:
<input id="width_area" name="" required="" />
<hr />
Высота поверхности:
<input id="height_area" name="" required="" />
</form>
<hr />
<button>Расчитать цену</button>
<hr /> 
Детализация:
<div id="details"></div> 
</body> 
</html>

Последний раз редактировалось laimas, 21.08.2015 в 05:49.
Ответить с цитированием
  #9 (permalink)  
Старый 23.08.2015, 22:35
Новичок на форуме
Отправить личное сообщение для letema88 Посмотреть профиль Найти все сообщения от letema88
 
Регистрация: 20.08.2015
Сообщений: 6

Да, спасибо, это ближе к истине, практически, что нужно. Не много подправлю и выложу рзультат
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор стоимости грузоперевозки kubikk Общие вопросы Javascript 2 14.09.2012 18:01
если сайт не отвечает то не грузить JS wlad2 Общие вопросы Javascript 13 13.11.2010 12:17
Сделать калькулятор на сайт. asderru Работа 1 22.07.2010 13:46
Скрипт радио на сайт sedoi95733 Ваши сайты и скрипты 2 05.02.2010 21:49
Наконец-то сайт открыт Илья Кантор Сайт Javascript.ru 9 06.08.2008 02:27