Калькулятор натяжных потолков, редактирование
Добрый день, изучаю JS, написал небольшой калькулятор
<script type="text/javascript">
function calculate() {
var price = 0;
var price1 = 0;
var room_length = document.calc.room_length.value;
var room_width = document.calc.room_width.value;
var tubes_quantity = document.calc.tubes_quantity.value;
var lightpoints_quantity = document.calc.lightpoints_quantity.value;
var angles_quantity = document.calc.angles_quantity.value;
var svetilnik_quantity = document.calc.svetilnik_quantity.value;
if (room_length > 0 && room_width > 0) {
document.getElementById('roof_size').innerText = room_length * room_width;
document.getElementById('roof_perimeter').innerText = 2 * room_length + 2 * room_width;
if (13 >= document.getElementById('roof_size').innerText)
price = room_length * room_width * 290 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300;
}
else
document.getElementById('roof_size').innerText = "0";
document.getElementById('price').innerText = price + "руб.";
return true;
if (room_length > 0 && room_width > 0) {
document.getElementById('roof_size').innerText = room_length * room_width;
document.getElementById('roof_perimeter').innerText = 2 * room_length + 2 * room_width;
if (20 >= document.getElementById('roof_size').innerText >= 13)
price1 = room_length * room_width * 280 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300;
}
else
document.getElementById('roof_size').innerText = "0";
document.getElementById('price').innerText = price + "руб.";
return true;
}
</script>
<form name="calc">
<table>
<tr>
<td>Длина комнаты, м:</td>
<td><input size="10" name="room_length" onkeypress="check_digits()" onkeyup="calculate();" /></td>
</tr>
<tr>
<td>Ширина комнаты, м:</td>
<td><input size="10" name="room_width" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во труб:</td>
<td><input size="10" name="tubes_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во люстр:</td>
<td><input size="10" name="lightpoints_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во светильников:</td>
<td><input size="10" name="svetilnik_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr style="display:none;">
<td>Кол-во углов в комнате:</td>
<td><input size="10" name="angles_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="4" /></td>
</tr>
<tr>
<td>Площадь потолка:</td>
<td><span id="roof_size"></span> м<sup>2</sup></td>
</tr>
<tr>
<td>Периметр потолка:</td>
<td><span id="roof_perimeter"></span> м</td>
</tr>
<tr>
<td>Примерная стоимость потолка:</td>
<td><span id="price1"></span></td>
</tr>
</table>
</form>
Встала необходимость добавить условия, такие как: 1. Если площадь от 1 до 13 кв.м. то считаем по 290, от 14 до 20 кв.м. 280 р/м, от 20 до 40 кв.м. = 260 р./м, от 40 и выше = 240 р./м 2. Если кол-во светильников от 1 до 10 то считаем по 290, свыше 10 по 250. С помощью какие операторов можно выполнить, склоняюсь к if else, не слишком ли много их будет? не повредит ли это? |
если обучаешься, то используй все - switch, if else, if else if ну, еще что нить придумай
|
xavibeat, if else if и логические операторы. А с чего бы их должно быть слишком много то? Я 6 условий насчитал максимум. Если написать все правльно, то не повредит.
|
Цитата:
|
И не забывайте про преобразование типов и про погрешности при работе с нецелыми значениями. Хотя в вашем случае не думаю, что это будет проблемой.
|
<script type="text/javascript">
function calculate() {
var price = 0;
var price_new = 0;
var room_length = document.calc.room_length.value;
var room_width = document.calc.room_width.value;
var tubes_quantity = document.calc.tubes_quantity.value;
var lightpoints_quantity = document.calc.lightpoints_quantity.value;
var angles_quantity = document.calc.angles_quantity.value;
var svetilnik_quantity = document.calc.svetilnik_quantity.value;
var svetilnik_quantity_new = 0;
if (svetilnik_quantity >=0 && svetilnik_quantity <= 10)
svetilnik_quantity_new = svetilnik_quantity * 290;
else svetilnik_quantity_new = svetilnik_quantity * 270;
if (room_length > 0 && room_width > 0) {
document.getElementById('roof_size').innerText = room_length * room_width;
document.getElementById('roof_perimeter').innerText = 2 * room_length + 2 * room_width;
if (document.getElementById('roof_size').innerText >= 0 && document.getElementById('roof_size').innerText <= 14)
price = room_length * room_width * 290 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300 + svetilnik_quantity_new;
if (document.getElementById('roof_size').innerText >= 15 && document.getElementById('roof_size').innerText <= 20)
price = room_length * room_width * 280 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300 + svetilnik_quantity * 270;
if (document.getElementById('roof_size').innerText >= 21 && document.getElementById('roof_size').innerText <= 40)
price = room_length * room_width * 260 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300 + svetilnik_quantity * 270;
if (document.getElementById('roof_size').innerText >= 41)
price = room_length * room_width * 240 + (2 * room_length + 2 * room_width) * 40 + tubes_quantity * 200 + lightpoints_quantity * 300 + svetilnik_quantity * 270;
}
else
document.getElementById('roof_size').innerText = "0";
document.getElementById('price').innerText = price + "руб.";
return true;
}
</script>
<form name="calc">
<table>
<tr>
<td>Длина комнаты, м:</td>
<td><input size="10" name="room_length" onkeypress="check_digits()" onkeyup="calculate();" /></td>
</tr>
<tr>
<td>Ширина комнаты, м:</td>
<td><input size="10" name="room_width" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во труб:</td>
<td><input size="10" name="tubes_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во люстр:</td>
<td><input size="10" name="lightpoints_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr>
<td>Кол-во светильников:</td>
<td><input size="10" name="svetilnik_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="" /></td>
</tr>
<tr style="display:none;">
<td>Кол-во углов в комнате:</td>
<td><input size="10" name="angles_quantity" onkeypress="check_digits()" onkeyup="calculate();" value="4" /></td>
</tr>
<tr>
<td>Площадь потолка:</td>
<td><span id="roof_size"></span> м<sup>2</sup></td>
</tr>
<tr>
<td>Периметр потолка:</td>
<td><span id="roof_perimeter"></span> м</td>
</tr>
<tr>
<td>Примерная стоимость потолка:</td>
<td><span id="price"></span></td>
</tr>
</table>
</form>
Вот добил как надо мне по условиям, но не могу реализовать следующее. Минимальный заказ 2900, если все значения сделать по "1" то сумма заказа будет 1400 (примерно с копейками). Как реализовать, что бы к сумме, которая меньше 2900 плюсовалась недостающая часть, что бы на выходе было все равно 2900 |
Скажите пожалуйста, почему данный скрипт не работает в Mozill-е
|
Подскажите пожалуйста. Как сделать такое условие. Есть поле с текстом, которое по умолчанию скрыто. При условии, когда сумма стоимости потолка меньше 2900 оно появляется. Как такое реализовать?
<script>
<!--
function KeyPress(e,element)
{
var kk = navigator.appName == 'Netscape' ? e.which : e.keyCode;
if (kk == 13)
{
document.calc.elements[element].focus();
return false
}
return true
}
//-->
</script>
<body onload="document.calc.textarea.focus();">
<h1>Расчет стоимости потолка</h1>
<table style="width: 100%">
<tr>
<td>
<script type="text/javascript">
function check_digits(if_no_points) {
var key = event.keyCode;
if (!(key >= 48 && key <= 57) && key != 8 && key != 46) { event.returnValue = false; }
}
function calculate() {
var price = 0;
var room_length = document.calc.room_length.value;
var room_width = document.calc.room_width.value;
var tubes_quantity = document.calc.tubes_quantity.value;
var lightpoints_quantity = document.calc.lightpoints_quantity.value;
var angles_quantity = document.calc.angles_quantity.value;
var svetilnik_quantity = document.calc.svetilnik_quantity.value;
var doroga = document.calc.doroga.value;
result_perimetr.innerHTML = document.calc.room_width.value * 40;
result_tubes.innerHTML = document.calc.tubes_quantity.value * 200;
result_lightpoints.innerHTML = document.calc.lightpoints_quantity.value * 300;
if (doroga >= 0 && doroga <= 20)
doroga_new = doroga * 0;
else doroga_new = doroga * 12;
result_doroga.innerHTML = doroga_new;
if (svetilnik_quantity >=0 && svetilnik_quantity <= 10)
svetilnik_new = svetilnik_quantity * 290;
else svetilnik_new = svetilnik_quantity * 270;
result_svetilnik.innerHTML = svetilnik_new;
if (room_length >=0 && room_length <= 14)
room_length_new = room_length * 290;
if (room_length >=15 && room_length <= 20)
room_length_new = room_length * 280;
if (room_length >=21 && room_length <= 40)
room_length_new = room_length * 260;
if (room_length >=41)
room_length_new = room_length * 240;
result_plochad.innerHTML = room_length_new;
price_new.innerHTML = room_length_new + svetilnik_new + doroga_new + document.calc.room_width.value * 40 + document.calc.tubes_quantity.value * 200 + document.calc.lightpoints_quantity.value * 300;
}
</script>
<form name="calc">
<table>
<tr>
<td width="40%">Площадь помещения, м:</td>
<td width="20%"><input size="5" name="room_length" onKeyPress="return KeyPress(event, 1);" onkeyup="calculate();" /></td>
<td width="20%"><span id="result_plochad">0</span> руб.</td></tr>
<tr>
<td>Периметр помещения, м (примерно равен площади):</td>
<td><input size="5" name="room_width" onKeyPress="return KeyPress(event, 2);" onkeyup="calculate();" value="" /></td>
<td><span id="result_perimetr">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во труб:</td>
<td><input size="5" name="tubes_quantity" onKeyPress="return KeyPress(event, 3);" onkeyup="calculate();" value="" /></td><td><span id="result_tubes">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во люстр:</td>
<td><input size="5" name="lightpoints_quantity" onKeyPress="return KeyPress(event, 4);" onkeyup="calculate();" value="" /></td><td><span id="result_lightpoints">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во светильников:</td>
<td><input size="5" name="svetilnik_quantity" onKeyPress="return KeyPress(event, 5);" onkeyup="calculate();" value="" /></td><td><span id="result_svetilnik">0</span> руб.</td>
</tr>
<tr>
<td>За сколько км. от Кирова Вы находитесь (районом считается расстояние свыше 20 км. от города):</td>
<td><input size="5" name="doroga" onKeyPress="return KeyPress(event, 6);" onkeyup="calculate();" value="" /></td><td><span id="result_doroga">0</span> руб.</td>
</tr>
<tr style="display:none;">
<td>Кол-во углов в комнате:</td>
<td><input size="5" name="angles_quantity" onKeyPress="return KeyPress(event, 7);" onkeyup="calculate();" value="4" /></td>
</tr>
<tr style="display:none;">
<td>Площадь потолка:</td>
<td><span id="roof_size"></span> м<sup>2</sup></td>
</tr>
<tr style="display:none;">
<td>Периметр потолка:</td>
<td><span id="roof_perimeter"></span> м</td>
</tr>
<tr>
<td>Примерная стоимость потолка:*</td>
<td><span id="price_new" >0</span> руб.</td>
</tr>
</table>
</form>
</td>
<td style="width: 20%"><center><img src="/images/sampledata/calculator.png" alt="Калькулято натяжных потолков" /></center></td>
</tr>
</table>
<h3>*Стоимость потолка может меняться в зависимости от условий (доп. углы, высота, сложность, акции, ширина, и др.) Точную стоимость уточняйте по телефону.</h3>
|
Ну если элемент скрыт через display:none, то чтобы показать просто сбрасываете это свойство:
element.style.display = ''; Если это скрытый инпут с типом hidden, то меняете type на text: inputEl.type = 'text'; Соответственно где у вас там сумма считается прописываете нужное условие и в зависимости от него отображаете элемент. |
Спасибо большое
|
| Часовой пояс GMT +3, время: 07:50. |