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

  Александр Маврин   Комментариев нет

Калькулятор на чистом JS

В этом уроке вы узнаете как писать простые и сложные калькуляторы на JavaScript и установить их на свой сайт. Исходник скрипта доступен на странице ли можете скачать его в конце этого поста. Мы напишем калькулятор цены ли расчета стоимости товаров или услуг на чистом JS. Поскольку сложность этой задачи сравнительно небольшая, то подключать библиотеку jQuery мы не будем, вполне можно обойтись без нее. Но для начала предлагаю посмотреть пример того, что получится в итоге.

Демо

Пишем калькулятор на JavaScript

За основу возьмем услугу по перевозке грузов и будем считать ее стоимость. И перед тем, как начать, необходимо определить исходные данные.

Стоимость 1кг 5.5 ₽
Стоимость куб² 3500 ₽
Погрузка/разгрузка 1500 ₽
Доставка до места 3500 ₽
Цена за 1км 2 ₽
Хрупкий груз 2000 ₽

Все эти параметры я взял с потолка. Основная задача, это понять принцип и тогда вы сможете самостоятельно написать калькулятор любой сложности на JS для своего сайта.

Теперь нужно заняться оформлением, то есть как будет выглядеть интерфейс калькулятора на странице. Для удобства буду использовать Bootstrap, чтобы вручную не писать CSS. HTML код разметки будет таким:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<form>
  <div class="row mb-3">
    <div class="form-group col-md-6 col-sm-6">
      <p class="badge badge-warning">Вес (кг)</p>
      <input type="text" name="date" class="form-control" id="weight" required="" placeholder="1500" required=""/>
    </div>
    <div class="form-group col-md-6 col-sm-6">
      <p class="badge badge-warning">Объем (куб²)</p>
      <input type="text" name="adress" id="vol" class="form-control" placeholder="2" required=""/>
    </div>
  </div>
  <div class="custom-control custom-checkbox row d-flex justify-content-center mb-3">
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="load" name="mess" class="custom-control-input"/>
      <label class="custom-control-label" for="load">Нужна погрузка</label>
    </div>
 
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="del" name="mess" class="custom-control-input"/>
      <label class="custom-control-label" for="del">Доставка до места</label>
    </div>
 
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="frag" name="mess" class="custom-control-input"/>
      <label class="custom-control-label" for="frag">Хрупкий груз</label>
    </div>
  </div>
  <div class="row mb-3">
 
    <div class="form-group col-md-12">
      <label for="range">Расстояние <span class="rasstoyanie">0</span> <span>км</span></label>
      <input type="range" class="custom-range" min="50" max="5000" step="50" id="range" value="500"/>
    </div>
 
  </div>
  <div class="row col-12 mb-3"><span id="out">0.0</span> <span class="rub"></span></div>
  <div class="row">
      <div class="col-md-2 col-12">
        <input type="button" name="adress" id="btn" class="btn-block btn btn-primary" value="Считать"/>
      </div>
  </div>
</form>


Калькулятор расчета доставки груза

Cкрипт JavaScript калькулятора

В JS коде первым делом запишем все инпуты (input) в переменные для дальнейшей работы с ними. А так же определим неизменные значения, которые я записал в таблицу. Затем будет функция для range слайдера и после нее основная функция расчета стоимости услуги с предварительной проверкой заполнения полей. Не буду разбивать код на части, а дополню его комментариями для лучшего понимания.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var btn = document.querySelector('#btn'),
    out = document.querySelector('#out'),
    weight = document.querySelector('#weight'),
    vol = document.querySelector('#vol'),
    load = document.querySelector('#load'),
    del = document.querySelector('#del'),
    frag = document.querySelector('#frag'),
    range = document.querySelector('#range'),
    rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = 500;
    weight = document.querySelector('#weight'),
    vol = document.querySelector('#vol'),
    kg = 5.5,
    kub = 3500,
    km = 2;
 // range slider
    range.onchange = function(){
      var rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = range.value;
    }
  // Basic function  
btn.onclick = function(){
  if (weight.value != '' && vol.value != '') {
      if (load.checked){ 
          load.value = 1500; }
        else 
        {
          load.value = 0;
      }
      if (del.checked){ 
          del.value = 3500; }
        else 
        {
          del.value = 0;
      }
      if (frag.checked){ 
          frag.value = 2000; }
        else 
        {
          frag.value = 0;
      }
 
var sum = (weight.value * kg) + (vol.value * kub) + Number(load.value) + + Number(del.value) + Number(frag.value) + (range.value * km);
      out.innerHTML = sum;
  }else{
alert('Введите вес и объем груза');
}
}


Калькулятор JS

По такой схеме, как и в калькуляторе процентов онлайн, можно добавлять неограниченное количество полей и присваивать им какие-то значения. Но не нужно забывать про удобство для конечного пользователя, все должно быть максимально понятно для восприятия. Надеюсь эта статья открыла вам глаза на то, как создать калькулятор на JavaScript и теперь вы с легкостью сможете применить полученные знания в своих проектах. А если что-то было непонятно, то пишите в комментариях ваши вопросы, будем разбираться вместе.

Добавить страницу в закладки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *