JavaScript калькулятор расчета стоимости для сайта

Тип статьи:
Рецензия
Источник:

В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание jаvascript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума.

Допустим имеется ситуация, когда копания продает один бренд линолеума. Для создания калькулятора на jаvascript потребуется узнать у пользователя длину и ширину для расчета площади помещения.

Создание формы для HTML для калькулятора

В первую очередь мы создаем форму, состоящую из двух полей для расчета площади.

Первое поле – ширина:

<input type=”text” id=”shirina” value=”” placeholder=”укажите ширину помещения”>

Такое же поле для длины:

<input type=”text” id=”dlina” value=”” placeholder=”укажите длину помещения”>

В оба поля мы добавляем идентификатор для того, чтобы наш скрипт мог легко получить введенные данные.

Добавляем кнопку расчета.

<button onclick=”raschitat()”>Рассчитать стоимость</button>

Далее создаем контейнер, собственно, куда будут добавляться данные расчета. Их будет два, в одном мы покажем площадь, во втором стоимость.

<div id="ploschad"></div><br> <div id="stoimost"></div>

Объединим все в один код:

<h3>Расчет стоимости линолеума</h3><br> <input type="text" id="shirina" value="" placeholder="укажите ширину помещения"><br> <input type="text" id="dlina" value="" placeholder="укажите длину помещения"><br> <button onclick="raschitat();">Рассчитать стоимость</button><br> <div id="ploschad"></div><br> <div id="stoimost"></div>


Создание jаvascript кода калькулятора

На следующем этапе нужно написать программный код дляjаvascript калькулятора расчета стоимости.

Изначально нужно получить данные длины и ширины из формы.

shirina = document.getElementById('shirina').value;<br> dlina = document.getElementById('dlina').value;

Добавляем условие для проверки на пустое поле.

if(shirina == ""){<br> alert("Вы не указали ширину");<br> } else if(dlina == ""){<br> alert("Вы не указали длину");<br> }

Если все в порядке, то запускаем расчет.

else {<br> cena = 440;<br> ploschad = parseFloat (shirina)* parseFloat (dlina);<br> document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" кв. м.";<br> stoimost = ploschad*cena;<br> document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";<br> }

Далее все объединяем в один программный код.

<script type="text/jаvascript"><br> function raschitat() {<br> shirina = document.getElementById('shirina').value;<br> dlina = document.getElementById('dlina').value;<br> if(shirina == ""){<br> alert("Вы не указали ширину");<br> } else if(dlina == ""){<br> alert("Вы не указали длину");<br> } else {<br> cena = 440;<br> ploschad = parseFloat (shirina)* parseFloat (dlina);<br> document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" кв. м.";<br> stoimost = ploschad*cena;<br> document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";<br> }<br> }<br> </script>

Итак, мы получили простейший jаvascript калькулятор расчета стоимостидля сайта. Это универсальный вариант, в котором рассчитывается цена исходя из площади помещения, включающая ее расчет исходя из ширины и длины. Все что вам нужно это скопировать данный код на свою страницу и прописать свою цену для переменной cena. Для его визуального оформления нужно воспользоваться CSS.

Как усовершенствовать калькулятор. Прежде всего в строку, где прописана переменная stoimost вы можете написать любую необходимую формулу расчета. Во-вторых можно добавлять еще параметры в зависимости от категории услуг или товаров.

Еще один вариант усложнения – это добавление, для данного примера, цвета линолеума. Для этого нужно в HTML код добавить поле выпадающего списка:

<select id="cvet"><br> <option value="serii">Серый</option><br> <option value="geltii">Желтый</option><br> <option value="goluboi">Голубой</option><br> </select>

Все это мы подставим в HTML код, а в jаvascript добавим следующее:

cvet = document.getElementById('cvet').value;<br> switch (cvet) {<br> case "serii":<br> cena = 440;<br> break<br> case "goluboi":<br> cena = 480;<br> break <br> case "geltii":<br> cena = 380;<br> break <br> default:<br> cena = 440;<br> break<br> }

Конечный программный код усовершенствованного калькулятора расчета стоимости:

<h3>Расчет стоимости линолеума</h3><br> <select id="cvet"><br> <option value="serii">Серый</option><br> <option value="geltii">Желтый</option><br> <option value="goluboi">Голубой</option><br> </select><br> <input type="text" id="shirina" value="" placeholder="укажите ширину помещения"><br> <input type="text" id="dlina" value="" placeholder="укажите длину помещения"><br> <button onclick="raschitat();">Рассчитать стоимость</button><br> <div id="ploschad"></div><br> <div id="stoimost"></div><br> <script type="text/jаvascript"><br> function raschitat() {<br> cvet = document.getElementById('cvet').value;<br> switch (cvet) {<br> case "serii":<br> cena = 440;<br> break<br> case "goluboi":<br> cena = 480;<br> break <br> case "geltii":<br> cena = 380;<br> break <br> default:<br> cena = 440;<br> break<br> }<br> shirina = document.getElementById('shirina').value;<br> dlina = document.getElementById('dlina').value;<br> if(shirina == ""){<br> alert("Вы не указали ширину");<br> } else if(dlina == ""){<br> alert("Вы не указали длину");<br> } else {<br> ploschad = parseFloat (shirina)* parseFloat (dlina);<br> document.getElementById('ploschad').innerHTML = "Площадь равна: "+ ploschad +" кв. м.";<br> stoimost = ploschad*cena;<br> document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";<br> }<br> }<br> </script>

Если у вас возникли какие-либо вопросы, то пишите в комментариях.

На странице если заменить
<script type="text/jаvascript">
на
<script>
тогда работает

RSS
Нет комментариев. Ваш будет первым!
OyO