Скрипт для калькулятора
Ребят, доброго вечера. Помогите со скриптом.
Нужен скрипт для формы расчета. Форма буде содержать 4 селекта и, собственно, результат. 1. Тираж. Выбирается из списка (10, 20, 30, 40) 2. Размер пакета (15*15, 30*30, 40*45) 3. Цвет пакета. Список зависит от размера пакета (15*15 (белый, черный), 30*30(красный, белый, синий), 40*45 (белый, красный, черный).. 4. Количество цветов нанесения. Выбирается из списка (1+0, 2+0, 3+0). Результат выводится без расчета: Если 1=10 2=3(40*45) 3=2(белый) 4=2(2+0) то результат = 500руб. Если 1=20 2=2(30*30) 3=2(белый) 4=2(2+0) то результат = 800руб. и так далее. Заранее спасибо) |
<div>
<select id="tirazh"> <option disabled selected></option> <option value="1">100шт</option> <option value="2">200шт</option> <option value="3">300шт</option> <option value="4">400шт</option> <option value="5">500шт</option> <option value="6">600шт</option> <option value="7">700шт</option> <option value="8">800шт</option> <option value="9">900шт</option> <option value="10">1000шт</option> <option value="11">1500шт</option> <option value="12">2000шт</option> </select> - Тираж; <br /> <br /> <select id="razmer"> <option disabled selected></option> <option value="size1">22,5 х 34см</option> <option value="size2">30 х 40см</option> <option value="size3">36 х 45см</option> <option value="size4">38 х 50см</option> <option value="size5">45 х 50см</option> <option value="size6">60 х 50см</option> <option value="size7">70 х 50см</option> </select> - Размер пакета; <br /> <br /> <select id="cvet"> </select> - Цвет пакета; <br /> <br /> <select id="nanesenie"> <option disabled selected></option> <option value="1">1 + 0</option> <option value="2">2 + 0</option> <option value="3">3 + 0</option> <option value="4">4 + 0</option> </select> - Количество цветов нанесения; <br /> <br /> <button onclick="Start();">Рассчитать!</button> <div style="font-weight:bold" id="result"></div> </div> |
А вот формулы, увы, нет(((
|
Со скриптами только на Вы
|
Так формулы расчета не будет. Для каждого сочетания селектов свой результат:
tirazh=1 razmer=size1 cvet=1 nanesenie=1 То результат = 500руб. Соответственно, при другой комбинации селектов результат будет другим. |
Этих комбинаций будет порядка 500шт.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<select id="tirazh">
<option selected></option>
<option value="1">100шт</option>
<option value="2">200шт</option>
<option value="3">300шт</option>
<option value="4">400шт</option>
<option value="5">500шт</option>
<option value="6">600шт</option>
<option value="7">700шт</option>
<option value="8">800шт</option>
<option value="9">900шт</option>
<option value="10">1000шт</option>
<option value="11">1500шт</option>
<option value="12">2000шт</option>
</select> - Тираж; <br /> <br />
<select id="razmer">
<option selected></option>
<option value="size1">22,5 х 34см</option>
<option value="size2">30 х 40см</option>
<option value="size3">36 х 45см</option>
<option value="size4">38 х 50см</option>
<option value="size5">45 х 50см</option>
<option value="size6">60 х 50см</option>
<option value="size7">70 х 50см</option>
</select> - Размер пакета; <br /> <br />
<select id="cvet">
</select> - Цвет пакета; <br /> <br />
<select id="nanesenie">
<option selected></option>
<option value="1">1 + 0</option>
<option value="2">2 + 0</option>
<option value="3">3 + 0</option>
<option value="4">4 + 0</option>
</select> - Количество цветов нанесения; <br /> <br />
<button>Рассчитать!</button>
<div style="font-weight:bold" id="result"></div>
</div>
<script>
var tirazh = document.querySelector("#tirazh"),
razmer = document.querySelector("#razmer"),
nanesenie = document.querySelector("#nanesenie"),
summ = 0;
document.querySelector("button").onclick=function(){
if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '1') summ = 500;
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '2') summ = 600;
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '3') summ = 700;
//итд
document.querySelector("#result").textContent = summ;
};
</script>
</body>
</html>
|
или такая вложенность.
но лучше найти кую-то закономерность и все сильно сократится
document.querySelector("button").onclick=function(){
if (tirazh.value == '1') {
if (razmer.value == 'size1') {
if (nanesenie.value == '1') summ = 500;
else if (nanesenie.value == '2') summ = 600;
//итд
}
else if (razmer.value == 'size2') {
if (nanesenie.value == '1') summ = 700;
else if (nanesenie.value == '2') summ = 800;
//итд
}
}
else if (tirazh.value == '2') {
if (razmer.value == 'size1') {
if (nanesenie.value == '1') summ = 900;
else if (nanesenie.value == '2') summ = 1000;
//итд
}
else if (razmer.value == 'size2') {
if (nanesenie.value == '1') summ = 1100;
else if (nanesenie.value == '2') summ = 1200;
//итд
}
}
document.querySelector("#result").textContent = summ;
};
|
Еще вопрос: как в скрипте поставить значение списка "cvet" - он зависим от списка "razmer" и тоже принимает значение.
|
а подробнее?
|
razmer1=1(белый)
razmer1=2(красный, серебро, ярко-синий, желтый, бежевый) razmer2=1(белый) razmer2=2(красный, серебро, ярко-синий, желтый, бежевый) razmer3=1(белый) razmer4=1(белый) razmer4=2(золотой, бежевый, бордовый) razmer5=1(белый) razmer5=2(черный, синий, желтый) razmer6=1(белый) razmer6=2(черный, синий) razmer5=1(белый) razmer5=2(черный) |
var tirazh = document.querySelector("#tirazh"),
razmer = document.querySelector("#razmer"),
nanesenie = document.querySelector("#nanesenie"),
cvet = document.querySelector("#cvet"),
summ = 0;
document.querySelector("button").onclick=function(){
if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '1' && cvet.value == 'белый') summ = 500;
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '2' && cvet.value == 'белый') summ = 600;
//итд
document.querySelector("#result").textContent = summ;
};
|
Цитата:
|
Леонид777,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>;</title>
</head>
<body>
<div class="genius-calculator">
<select id="tirazh">
<option selected></option>
<option value="1">100шт</option>
<option value="2">200шт</option>
<option value="3">300шт</option>
<option value="4">400шт</option>
<option value="5">500шт</option>
<option value="6">600шт</option>
<option value="7">700шт</option>
<option value="8">800шт</option>
<option value="9">900шт</option>
<option value="10">1000шт</option>
<option value="11">1500шт</option>
<option value="12">2000шт</option>
</select>
- Тираж;
<br />
<br />
<select id="razmer">
<option selected></option>
<option value="size1">22,5 x 34см</option>
<option value="size2">30 x 40см</option>
<option value="size3">36 x 45см</option>
<option value="size4">38 x 50см</option>
<option value="size5">45 x 50см</option>
<option value="size6">60 x 50см</option>
<option value="size7">70 x 50см</option>
</select>
- Размер пакета;
<br />
<br />
<select id="cvet"></select>
- Цвет пакета;
<br />
<br />
<select id="nanesenie">
<option selected></option>
<option value="1">1 + 0</option>
<option value="2">2 + 0</option>
<option value="3">3 + 0</option>
<option value="4">4 + 0</option>
</select>
- Количество цветов нанесения;
<br />
<br />
<button>Рассчитать!</button>
<div style="font-weight:bold" id="result"></div>
</div>
<script>
(function(window, document) {
var genius_calc = function(parent) {
parent = document.querySelector(parent);
if (!parent) return;
// сделал вручной ввод, чтобы тс поработал
var amazing_inputs = [
'100,22,5x34,белый,2+0',
'200,30x40,белый,2+0'
];
// не хотел делать объектами
var assoc_prices = ['500','800'];
var sizes = ['22,5x34', '30x40'];
var assoc_colors = ['белый,черный', 'красный,белый,синий'];
var re = /[\s|см|шт]/g; // воскресная лень
return {
init: function() {
parent.addEventListener('click', this.calculate.bind(this));
parent.addEventListener('change', this.fillColors.bind(this));
},
fillColors: function(e) {
var sel = document.getElementById('cvet');
if (!sel) return;
if (e.target.tagName == 'SELECT' && e.target.id == 'razmer') {
var opt = e.target.options.selectedIndex;
opt = e.target.options[opt];
var val = opt.textContent.replace(re, '');
var f = this.find(val, sizes);
if (sel && sel.firstElementChild) {
while (sel.firstElementChild) {
sel.removeChild(sel.firstElementChild);
}
}
if (typeof(f) == 'number') {
var s = assoc_colors[f];
if (sel) {
s.split(',').forEach(function(v) {
var option = document.createElement('option');
option.textContent = v;
sel.appendChild(option);
});
}
}
}
},
collect: function(e) {
var selects = parent.querySelectorAll('select');
var arr = [];
[].forEach.call(selects, function(select, indx) {
var opt = select.options.selectedIndex;
opt = select.options[opt];
if (opt)
arr.push(opt.textContent.replace(re, '').toLowerCase());
});
return arr.join(',');
},
find: function(str, variable) {
var indx = variable.indexOf(str);
if (~indx) return indx;
return false;
},
dump: function(n) {
document.getElementById('result').textContent = assoc_prices[n];
},
calculate: function(e) {
if (e.target.tagName == 'BUTTON') {
var c = this.collect();
var f = this.find(c, amazing_inputs);
if (typeof(f) == 'number')
this.dump(f);
}
}
};
};
var gc = genius_calc('.genius-calculator');
gc.init();
})(window, document);
</script>
</body>
</html>
|
Ребят, спасибо Вам за помощь!!! Огромное спасибо)))
|
Цитата:
Извиняюсь за наглость... При подстановке, допустим, красного цвета расчет не производится. var amazing_inputs = [ '100,22,5x34,белый,1+0', '200,22,5x34,белый,1+0', '300,22,5x34,белый,1+0', '400,22,5x34,белый,1+0', '500,22,5x34,белый,1+0', '600,22,5x34,белый,1+0', '700,22,5x34,белый,1+0', '800,22,5x34,белый,1+0', '900,22,5x34,белый,1+0', '1000,22,5x34,белый,1+0', '1500,22,5x34,белый,1+0', '2000,22,5x34,белый,1+0', '100,22,5x34,красный,1+0', '200,22,5x34,красный,1+0', '300,22,5x34,красный,1+0', ]; // не хотел делать объектами var assoc_prices = ['1500руб','2510руб','3470руб','4280руб ','4720руб','5480руб','6230руб','6990ру б','7740руб','8500руб','12490руб','16490 руб', var sizes = ['22,5x34', '30x40', '36x45', '38x50', '45x50', '60x50', '70x50']; var assoc_colors = ['белый,красный,серебро,ярко-синий,желтый,бежевый', 'белый,красный,серебро,ярко-синий,желтый,бежевый', 'белый', 'белый,золотой,бежевый,борд овый', 'белый,черный,синий,желтый', 'белый,черный,синий', 'белый,черный']; var re = /[\s|см|шт]/g; // воскресная лень |
Леонид777,
x - латиницей прописан? |
Да, латиницей
|
Леонид777,
Замени 78 строку var re = /\s|см$|шт$/g; |
Все ок.
А сгруппировать цвета? '100,22,5x34,белый,1+0', '200,22,5x34,белый,1+0', '100,22,5x34,красный,серебро,ярк -синий,желтый,бежевый,1+0', |
Леонид777,
Не прокатит, т.к в алгоритме строгое сравнение. Но есть возможность для творчества. |
Ок, понял. Спасибо.
Как тебя отблагодарить можно? |
Цитата:
|
|
| Часовой пояс GMT +3, время: 05:58. |