Отправляет email-рассылки с помощью сервиса Sendsay
Компьютеры и интернет → Обучение

Интернет для начинающих пользователей 989

Открытая группа
34112 участников
Администратор Svengali

Важные темы:

Последние откомментированные темы:

20250419090140

←  Предыдущая тема Все темы Следующая тема →
master284
пишет:

Калькулятор расчёта цены решёток на окна, - код полностью.

Часто посетителю требуется  узнать цену вашей услуги или товара в зависимости от размера, веса, доставки, установки и т. п.
И начинаете задавать вопросы, считать, отвечать. Гораздо продуктивнее иметь на сайте калькулятор простейшего расчёта для будущего клиента.  Посетитель самостоятельно пишет пару цифр, кликает по кнопке РЕЗУЛЬТАТ и мгновенно ему показывается  нужная цифра.
Поэтому есть возможность поделиться таким калькулятором на базе 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">&Oslash; 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;
Это интересно
0

master284
03.07.2020
Пожаловаться Просмотров: 191  
Комментарии 0
←  Предыдущая тема Все темы Следующая тема →


Комментарии временно отключены