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>
<div id="stoimost"></div>

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

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

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

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

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

shirina  = document.getElementById('shirina').value;
dlina  = document.getElementById('dlina').value;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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