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

    36 комментариев 16882

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

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

Телеграм-канал serblog.ru

Демо

Пишем калькулятор на 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('Введите вес и объем груза');
}
}


demo_calk

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

Любая сумма на развитие сайта

Категории: Уроки   Тэги:

Читайте также:

36 комментариев
  1. Ольга:
    06.09.2020 в 14:05

    Добрый день! Вставляю код html, но не срабатывает, форма есть, но не в таком виде как на демо. И ничего не считает. Подскажите, может кроме кода еще что то надо прописать?

    Ответить
    • Александр Маврин:
      06.09.2020 в 20:04

      Попробуйте скопировать код с демо страницы. Больше ничего прописывать не нужно, все должно и так работать.

      Ответить
  2. Сергей:
    23.10.2020 в 02:59

    Доброго.
    какой код нужен, чтоб при введение цифр сразу показывался итог ?
    Еще хотелось бы код с ЕСЛИ ТО.
    Заранее спасибо.

    Ответить
    • Александр Маврин:
      23.10.2020 в 11:25

      В таком случае событие будет не клик , а oninput или onkeydown.

      1
2
3
4
5

      if(a < 5){
  b = 100;
}else{
  b = 50;
}
      Ответить
      • Дмитрий:
        27.07.2021 в 17:56

        Доброго времени суток! Помогите пожалуйста разобраться с этим) не получается перемонтировать..

        Ответить
        • Александр Маврин:
          28.07.2021 в 10:31

          Что перемонтировать?

          Ответить
          • Дмитрий:
            28.07.2021 в 15:18

            if(a < 5){
            b = 100;
            }else{
            b = 50;
            }

            Сие чудо в ваш урок 🙂

          • Александр Маврин:
            28.07.2021 в 15:39

            Что именно не понятно? Это обычное условие. Если переменная А меньше 5 то переменной Б присвоим 100. Во всех других случаях переменная Б будет равна 50.

  3. Андрей:
    01.01.2021 в 18:46

    На блог пришёл в поиске проблемы. Понравилось.

    Ответить
  4. Андрей:
    01.01.2021 в 21:30

    Дело в том, что мне нравится тема создания различного рода калькуляторов расчёта стоимости товаров и особенно услуг. Несколько простейших калькуляторов создано на базе одного из уроков А.Лущенко из его канала на YouTube. Создал отдельную страничку для расчёте потребления и оплаты электроэнергии. Она указана здесь в реквизитах к комментарию. Поэтому мне бы хотелось самостоятельно расширить свою практику в программировании различных калькуляторов. Вот и обращаюсь с тем, что же почитать по JS, точнее, какие разделы нужно особенно проштудировать для решения подобных задач. Причём, интересно, в кодах предусматривать различные антиспамные попытки ввода не корректных данных. Именно это и есть в ваших статьях блога. А пока приступаю к изучению ваших кодов калькуляторов потихоньку. У Вас лёгко читаемый воздушный сайт. А где подписка?

    Ответить
    • Александр Маврин:
      01.01.2021 в 22:59

      Рад, что вам нравится. Подписки как таковой нет. Не уверен, что на нужна.

      Ответить
      • Андрей:
        02.01.2021 в 18:41

        ….. обращаюсь с тем, что же почитать по JS и где, точнее, какие разделы нужно особенно проштудировать для решения подобных задач — создание калькуляторов.

        P.S. Не смотря, что стоит чек бокс «Оповещать о новых комментариях по почте», оно не пришло.

        Ответить
  5. Андрей:
    02.01.2021 в 18:55

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

    Ответить
  6. Захар:
    16.06.2021 в 19:08

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

    HTML:

    Рассчитай стоимость услуг в пару кликов!
    Где Вы планируете рекламироваться ?

    Facebook / Instagram

    Google Adwords

    Yandex Direct

    Офферы в рекламных компаниях ?

    С Нас

    С Вас

    Текст в рекламных компаниях ?

    С Нас

    С Вас

    На какой планируеться ведение рекламной компании ?

    На месяц

    На неделю

    0.0 ₽

    JS:

    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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

    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'),
    btn = document.querySelector('#btn'),
    out = document.querySelector('#out'),
    fb = document.querySelector('#fb'),
    google = document.querySelector('#google'),
    yandex = document.querySelector('#yandex'),
    offersnas = document.querySelector('#offersnas'),
    offersvas = document.querySelector('#offersvas'),
    textsnas = document.querySelector('#textsnas'),
    textsvas = document.querySelector('#textsvas'),
    month = document.querySelector('#month'),
    week = document.querySelector('#week');
  // Basic function  
btn.onclick = function(){
  if (weight.value != '' &amp;&amp; vol.value != '') {
      if (fb.checked){ 
          fb.value = 10000; }
        else 
        {
          fb.value = 0;
      }
      if (google.checked){ 
          google.value = 10000; }
        else 
        {
          google.value = 0;
      }
      if (yandex.checked){ 
          yandex.value = 10000; }
        else 
        {
          yandex.value = 0;
      }
      if (offersnas.checked){ 
          offersnas.value = 10000; }
        else 
        {
          offersnas.value = 0;
      }
      if (offersvas.checked){ 
          offersvas.value = 0; }
        else 
        {
          offersvas.value = 0;
      }
      if (textsnas.checked){ 
          textsnas.value = 5000; }
        else 
        {
          textsnas.value = 0;
      }
      if (textsvas.checked){ 
          textsvas.value = 0; }
        else 
        {
          textsvas.value = 0;
      }
      if (month.checked){ 
          month.value = 30000; }
        else 
        {
          month.value = 0;
      }
      if (week.checked){ 
          week.value = 10000; }
        else 
        {
          week.value = 0;
      }
 
var sum = Number(fb.value) + Number(google.value) + Number(yandex.value) + Number(offersnas.value) + Number(offersvas.value) + Number(textsnas.value) + Number(textsvas.value) + Number(week.value) + Number(month.value);
      out.innerHTML = sum;
  }else{
alert('Введите вес и объем груза');
}
}
    Ответить
  7. Андрей:
    27.07.2021 в 20:09

    Подтверждаю, все калькуляторы Александра работают безупречно. Все его разработки я разобрал, модернизировал и научился алгоритму их составления. Самое ценное я узнал здесь, что оказывается одним кликом можно запускать не только одну функцию, а сколько угодно одновременно и получать в результате общий суммарный итог в виде одной или нескольких цифр. Рекомендую обратить внимание на правильность срабатывания логических цепочек и арифметических действий. Желательно знать теорию циклов применительно к параметру date, что сильно сокращает написание кода.
    Пример разработанного кода калькулятора на JS расчёта цены металлической решётки из разных материалов и сложности рисунка можно посмотреть на моей странице под моим именем в аватаре. Используется любой телефон для просмотра. Скопировать все коды можете прямо со страницы исходных кодов. Спасибо Александру за науку и практику.

    Ответить
  8. Александр:
    08.02.2022 в 10:30

    А как получать результаты расчета на емайл владельца сайта, если пользователь указал номер телефона или свой емайл?

    Ответить
  9. Галя:
    24.02.2022 в 13:02

    Добрый день, а как можно разбить полученную сумму (число) на разряды, например, 10 000 р.

    Ответить
    • Александр Маврин:
      24.02.2022 в 21:04

      Примерно так:

      1
2
3
4
5

      var numb = 10572,
pay = 11073;
rez = Math.round(numb*pay*2.1/100);
var outrez = (rez+'').replace(/(d)(?=(ddd)+([^d]|$))/g, '$1 ');
console.log( outrez );
      Ответить
  10. Александр:
    09.09.2022 в 09:11

    Здравствуйте. А что значит:
    required=»» ?

    Ответить
  11. Александр:
    09.09.2022 в 10:12

    А для чего указан знак равно и кавычки?

    Ответить
    • Александр Маврин:
      09.09.2022 в 10:46

      Можно указывать так: required=»required» Можно просто: required. Так тоже можно: required=»» (в моем случае редактор автоматом поставил)

      Ответить
  12. Александр:
    09.09.2022 в 11:02

    А каким редактором Вы пользуетесь?

    Ответить
  13. Александр:
    09.09.2022 в 11:46

    Благодарю за ответы. А как можно сделать квадратики для галочек больше, чтобы удобно было попадать пальцем на Андроиде?

    Ответить
  14. Александр:
    06.10.2022 в 12:33

    Какой должен быть код урока, чтобы это работало с bootstrap 5?

    Ответить
  15. Никита:
    09.03.2023 в 10:38

    Здравствуйте. А как сделать без указания веса? Спасибо.

    Ответить
    • Александр Маврин:
      09.03.2023 в 11:02

      Самый простой вариант это принудительно указать weight.value = 0; И убрать поле веса из html.

      Ответить
  16. Константин:
    14.10.2023 в 23:03

    Доброго времени суток!
    Начну из далека. Подскажите как правильно создать калькулятор для расчета стоимости доставки транспортными компаниями по API.? Форму калькулятора вставил, но дальше все идет не так. Все в разрез. Уже 2 дня потратил с GPT искл исходы и ошибки. В итоге: продуктивность =0!!!!!!
    Как мне сделать это? Просил фрилансеров, по 10 дней ждал каждого- в итоге ответ-я не могу. Это что действительно очень сложно? Я смотрю пример сайт catapulto.ru
    там все нормально работает.

    Ответить

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

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

В телегу