пишет:
Часто посетителю требуется узнать цену вашей услуги или товара в зависимости от размера, веса, доставки, установки и т. п.
И начинаете задавать вопросы, считать, отвечать. Гораздо продуктивнее иметь на сайте калькулятор простейшего расчёта для будущего клиента. Посетитель самостоятельно пишет пару цифр, кликает по кнопке РЕЗУЛЬТАТ и мгновенно ему показывается нужная цифра.
Поэтому есть возможность поделиться таким калькулятором на базе JS в простейшем виде.
Калькулятор расчёта цены металлической сварной решётки на окна. Есть рисунки разных решёток пронумерованные, есть толщина прутка металла, есть цена квадратного метра решётки, есть у посетителя высота и ширина оконного проёма, есть цена установки, есть цена покраски.
Все эти параметры заведены в программу калькулятора. И только ширину и высоту посетитель пишет в поля калькулятора. И делает клик, получая результат.
Если клиент попробует провоцировать калькулятор, то в ответ получит: undefined или NaN, что соответствует «результата нет».
Компоновка: файл index.html, файл script.js, файл style.css . Их подключение указано уже в разделе <head>---</head> script.js и style.css лежат в своих папках.
Как это работает, посмотрите на этой странице в живую: https://servis.kharkov.ua/re/#c1
КОДИРОВКА HTML страницы:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>КАЛЬКУЛЯТОР</title>
<link href="https://fonts.googleapis.com/css?family=Gabriela&display=swap&subset=cyrillic,cyrillic-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js" defer></script>
</head>
<body>
<div class="combo">
<div class="calculator">
<p class="calc">Калькулятор расчёта цены - решётки на окна, пруток <span class="red">Ø 8 мм</span> №
№
рисунков: 8, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 27,
40, 41, 42, 43, 44, 45, 47, 49, 51, 71.</p>
<hr>
<p class="calc_item">Высота проёма окна в сантиметрах:<input type="text" id="n1"></p>
<p class="calc_item">Ширина проёма окна в сантиметрах:<input type="text" id="n2"></p>
<button onclick="multi()">Расcчитать</button>
<hr>
<p id="out">Результат цены <b>одного окна</b></p>
<hr>
<p id="out2">Результат цены <b>двух</b> окон</p>
<hr>
<p id="out3">Результат цены <b>трёх</b> окон</p>
<hr>
<p id="out4">Результат цены <b>четырёх</b> окон</p>
<hr>
<p id="out5">Результат цены <b>пяти</b> окон</p>
</div>
</div>
</body>
</html>
СТРАНИЦА JS:
//Калькулятор расчёта цены решётки из прутка 8 мм.
function multi() {
let num1, num2, num3, result, result2, result3, result4, result5;
num3 = 0.04;// цена 1 кв. см.
num4 = 100; // цена покраски 1 решётки
num5 = 100; // цена установки 1 решётки
num1 = document.getElementById('n1').value;
num1 = parseInt(num1);
num2 = document.getElementById('n2').value;
num2 = parseInt(num2);
if ((num1 * num2) == 0) {
result = 'Не корректный ввод размеров';
}
else {
result = (num1 * num2 * num3) + 200 + 1000 + ' ' + 'гривен. Одно окно. Покраска эмалевая. Установка первый этаж.';
result2 = ((num1 * num2 * num3) * 2) + 400 + 444 + ' ' + 'гривен. Два окна. Покраска эмалевая. Установка первый этаж.';
result3 = ((num1 * num2 * num3) * 3) + 600 + ' ' + 'гривен. Три окна. Покраска эмалевая. Установка первый этаж.';
result4 = ((num1 * num2 * num3) * 4) + 800 + ' ' + 'гривен. Четыре окна. Покраска эмалевая. Установка первый этаж.';
result5 = ((num1 * num2 * num3) * 5) + 1000 + ' ' + 'гривен. Пять окон. Покраска эмалевая. Установка первый этаж.';
}
document.getElementById('out').innerHTML = result;
document.getElementById('out2').innerHTML = result2;
document.getElementById('out3').innerHTML = result3;
document.getElementById('out4').innerHTML = result4;
document.getElementById('out5').innerHTML = result5;
}
СТРАНИЦА СТИЛЕЙ CSS:
*{
margin: 0;
padding:0;
}
.calculator{
font-family: 'Gabriela', serif;
font-weight:400;
max-width:300px;
margin: 10px auto;
border:2px solid #8ac1c5;
background-color: #c7f0f0;
padding:10px;
}
.calc{
font-size: 1.0em;
font-weight:400;
text-align:center;
}
#n1{
width:40px;
height:30px;
text-align:center;
font-size:18px;
border:1px solid #05f77e;
}
#n2{
width:40px;
height:30px;
text-align:center;
font-size:18px;
border:1px solid #05f77e;
}
button{
display: block;
width:98px;
margin:0 auto;
font-size:18px;
background-color: #eaf1f1;
}
#out{
font-size:1.0em;
color:#f5680a;
}
#out2 {
font-size:1.0em;
color:#5c1af7;
}
#out3 {
font-size:1.0em;
color:#0a9ff5;
}
#out4 {
font-size:1.0em;
color:#090b61;
}
#out5 {
font-size:1.0em;
color:#4ebe21;
}
.calc_item{
margin: 0.5em;
font-weight:400;
}
.red{
color:red;
}
Это интересно
0
|
|||
Последние откомментированные темы:
-
Бизнес для пожилых людей
(1)
zelshag
,
14.02.2022
-
Как приготовить самсу в тандыре - пошаговая инструкция
(1)
фил
,
03.01.2022
-
Как стать миллионером с нуля?
(1)
ZEUS
,
20.12.2021
20251003180014