Делаем калькулятор стоимости

Бесплатный онлайн инструмент - конструктор калькуляторов стоимости без знания программирования, создавайте калькуляторы с различными полями ввода, условной логикой и сложными формулами, идеально подходит для расчёта цен, услуг и заказов.

Элементы калькулятора (перетащите для изменения порядка)

Примеры: a + b * 0.1, Math.round(price * quantity)

Доступные элементы для формулы

Добавьте элементы на вкладке "Элементы"

Предпросмотр калькулятора

HTML код

JavaScript код

Конфигурация (JSON)

Готовые шаблоны:

Введение

Этот инструмент позволяет создавать калькуляторы стоимости без навыков программирования. Вы можете:

  • Добавлять различные типы полей ввода
  • Настраивать логику расчётов с помощью формул
  • Создавать условное отображение элементов
  • Экспортировать готовый калькулятор в HTML файл
Совет: Начните с простого калькулятора, чтобы понять принцип работы, затем переходите к сложным конструкциям.

Создание элементов калькулятора

Элементы - это поля ввода, которые будут отображаться в вашем калькуляторе:

Доступные типы элементов:

Тип Описание Пример использования
Текстовое поле Однострочный текстовый ввод Имя клиента, комментарий
Числовое поле Поле для ввода чисел Количество товаров, площадь помещения
Ползунок Графический выбор значения в диапазоне Уровень качества, количество дней
Выпадающий список Выбор одного значения из списка Тип услуги, категория товара
Чекбокс Флажок (да/нет) Дополнительные опции
Радиокнопки Выбор одного варианта из нескольких Способ доставки, вариант оплаты

Пример: Добавление числового поля

  1. Выберите тип "Числовое поле"
  2. Введите название: "Количество товаров"
  3. Нажмите "Добавить элемент"

Теперь это поле появится в списке элементов и в предпросмотре.

Управление элементами:

  • Клонирование: Нажмите для копирования элемента
  • Изменение порядка: Перетащите элемент за иконку
  • Редактирование: Нажмите
  • Удаление: Нажмите

Настройка логики расчётов

Здесь вы создаёте формулу, по которой будет рассчитываться итоговая стоимость.

Как это работает: Используйте идентификаторы элементов (указаны в списке ниже) как переменные в формуле.

📌 Основы создания формул

Базовые операции:

Операция Пример Результат (при значениях 10 и 5)
Сложение a + b 15
Вычитание a - b 5
Умножение a * b 50
Деление a / b 2
Проценты a * 0.1 1 (10% от 10)

Полезные функции:

Функция Пример Описание
Округление Math.round(4.6) → 5
Округление до 2 знаков Math.round(4.567 * 100)/100 → 4.57
Минимум Math.min(a, b) Меньшее из значений
Максимум Math.max(a, b) Большее из значений

🔢 Примеры готовых формул

1. Калькулятор стоимости заказа

Элементы:

  • input_m8q6atn3 - количество товаров
  • input_m8q7btp4 - цена за единицу
  • input_m8q8f03l - стоимость доставки
// Простая формула (используйте реальные ID из вашего калькулятора)
input_m8q6atn3 * input_m8q7btp4 + input_m8q8f03l

2. Калькулятор скидки

Элементы:

  • input_m8q9g14m - сумма заказа
  • input_m8q0h25n - процент скидки
// С учётом скидки
input_m8q9g14m * (1 - input_m8q0h25n/100)

// С округлением до рубля
Math.round(input_m8q9g14m * (1 - input_m8q0h25n/100))

3. Условный расчёт доставки

Элементы:

  • input_m8q1i36o - расстояние (км)
  • chk_m8q2j47p - срочная доставка (чекбокс)
// Чекбокс возвращает 1 или 0
input_m8q1i36o <= 10 ? 500 : 1000 + (chk_m8q2j47p ? 500 : 0)

Логика: Если ≤10 км - 500₽, иначе 1000₽ + 500₽ если чекбокс отмечен

4. Расчёт зарплаты

Элементы:

  • input_m8q3k58q - основные часы
  • input_m8q4l69r - сверхурочные часы
  • select_m8q5m70s - категория работника
// Сложная логика с условием
var baseRate = select_m8q5m70s === "senior" ? 1500 : 1000;
var overtimeRate = select_m8q5m70s === "senior" ? 2000 : 1500;

input_m8q3k58q * baseRate + input_m8q4l69r * overtimeRate

5. Работа с выпадающим списком

Элементы:

  • select_m8q6n81t - тип услуги (значения: "standard", "premium")
// Проверка точного значения
select_m8q6n81t === "premium" ? 2000 : 1000

⚠️ Возможные ошибки

  • Неверные имена: Используйте точные идентификаторы из списка элементов (чувствительны к регистру)
  • Пропущенные скобки: a + b * c ≠ (a + b) * c
  • Дробные числа: Используйте точку: 0.5 (не 0,5)
  • Чекбоксы: Возвращают 1 (отмечен) или 0 (не отмечен)

Условное отображение элементов

Позволяет динамически скрывать/показывать элементы формы в зависимости от значений других полей.

⚙️ Как это работает технически

При изменении значения элемента-триггера система проверяет все зависимые поля и:

  • Показывает элемент, если условие выполнено
  • Скрывает элемент, если условие не выполнено
  • Автоматически пересчитывает формулу, если были скрыты/показаны влияющие на расчёт поля

Пошаговая настройка:

📌 Шаг 1: Создайте элемент-триггер

Поддерживаемые типы:

  • Выпадающий список - проверяется точное значение
  • Радиокнопки - проверяется выбранное значение
  • Чекбокс - проверяется 1 (отмечен) или 0 (не отмечен)

Пример: select_delivery_type с вариантами "courier", "cargo", "post"

📌 Шаг 2: Создайте зависимый элемент

Настройте условие:

  1. В поле "Показывать если" выберите ваш триггер
  2. В поле "Значение" укажите:
    • Для чекбоксов: 1 или 0
    • Для других типов: точное значение в кавычках

Пример: Показывать input_cargo_number если select_delivery_type равно "cargo"

🔧 Практические примеры

Пример 1: Дополнительные опции для типа услуги

Элементы:

  • select_service_type (значения: "cleaning", "repair")
  • input_room_count - показывать только для "cleaning"
  • select_repair_type - показывать только для "repair"

Настройки:

Для input_room_count:
Показывать если: select_service_type
Значение: "cleaning"

Для select_repair_type:
Показывать если: select_service_type
Значение: "repair"

Пример 2: Чекбокс для дополнительных услуг

Элементы:

  • chk_insurance - чекбокс "Добавить страховку"
  • input_insurance_sum - показывать только при отмеченном чекбоксе

Настройки:

Для input_insurance_sum:
Показывать если: chk_insurance
Значение: "1"

Пример 3: Многоуровневая логика

Элементы:

  • select_country (значения: "ru", "kz", "eu")
  • select_region - показывать только для "ru" и "kz"
  • input_eu_vat - показывать только для "eu"

Решение:

// Для select_region потребуется дополнительная JS-формула
// в условном отображении:
["ru", "kz"].includes(select_country)
Внимание! Для сложных условий потребуется ручное редактирование JS-кода после экспорта.

⚠️ Возможные проблемы

  • Элемент не появляется в списке - убедитесь, что триггер создан до зависимого элемента
  • Условие не срабатывает - проверьте точность значения (регистр, пробелы, кавычки)
  • Не работает с ползунками - используйте выпадающие списки или радиокнопки как триггеры

🆔 Работа с идентификаторами

Инструмент автоматически генерирует ID для каждого элемента в формате:

Тип элемента Пример ID
Выпадающий список select_m8q6cwha
Числовое поле input_m8q6atn3
Чекбокс chk_m8q8f03l
Важно! В формулах используйте именно эти идентификаторы. Название элемента нужно только для отображения в интерфейсе.

Как правильно ссылаться в формулах:

  1. Добавьте элемент и задайте ему название (например, "Количество товаров")
  2. Перейдите на вкладку "Логика"
  3. В таблице "Доступные элементы" найдите нужный ID
  4. Используйте его в формуле как переменную: 
    // Правильно:
select_m8q6cwha === "express" ? 1000 : 500

// Неправильно (использование названия вместо ID):
"Тип доставки" === "express" ? 1000 : 500

Экспорт калькулятора

После настройки всех элементов и формулы вы можете экспортировать калькулятор:

Доступные варианты экспорта

  • Сохранить конфигурацию - сохраняет настройки в JSON-файл для последующего редактирования
  • Загрузить конфигурацию - загружает ранее сохранённые настройки
  • Экспорт в файлы - создаёт HTML файл готового калькулятора

Как использовать готовый калькулятор:

  1. Экспортируйте калькулятор (кнопка "Экспорт в файлы")
  2. Скопируйте полученные файлы (HTML и JS) на ваш сайт
  3. Добавьте ссылку на CSS Bootstrap в head вашей страницы: 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Примеры готовых калькуляторов

Важно! В примерах ниже используйте реальные ID элементов из вашего калькулятора вместо абстрактных имён переменных.

🏠 Калькулятор стоимости ремонта

Элементы:

  • input_m8q6atn3 - площадь помещения (м²)
  • select_m8q7btp4 - тип ремонта: "economy", "standard", "premium"
  • chk_m8q8f03l - дополнительно: демонтаж
  • chk_m8q9g14m - дополнительно: вывоз мусора

Формула:

// Определяем базовую стоимость
var basePrice = input_m8q6atn3 * (
 select_m8q7btp4 === "economy" ? 1000 :
 select_m8q7btp4 === "standard" ? 1500 : 2000
);

// Добавляем доп. работы (чекбоксы возвращают 1 или 0)
var additional = (chk_m8q8f03l ? 5000 : 0) + (chk_m8q9g14m ? 3000 : 0);

// Итоговая сумма
basePrice + additional
Обратите внимание: Значения в условиях ("economy", "standard") должны точно соответствовать значениям в выпадающем списке.

📦 Калькулятор стоимости доставки

Элементы:

  • input_m8q0h25n - вес посылки (кг)
  • radio_m8q1i36o - способ доставки: "standart", "express", "pickup"
  • chk_m8q2j47p - страхование

Формула:

// Инициализируем стоимость
var deliveryCost = 0;

// Определяем базовую стоимость по типу доставки
if (radio_m8q1i36o === "standart") {
 deliveryCost = input_m8q0h25n * 10;
} else if (radio_m8q1i36o === "express") {
 deliveryCost = input_m8q0h25n * 20 + 500;
}

// Добавляем страховку (300 руб если чекбокс отмечен)
deliveryCost + (chk_m8q2j47p ? 300 : 0)

Совет: Для радиокнопок используйте точные значения вариантов. Проверить их можно в настройках элемента.

🍕 Калькулятор заказа пиццы

Элементы:

  • select_m8q3k58q - размер: "small"(500₽), "medium"(800₽), "large"(1100₽)
  • checkbox_m8q4l69r - сырный бортик (+200₽)
  • input_m8q5m70s - количество

Формула:

// Стоимость в зависимости от размера
var pizzaPrice = (
 select_m8q3k58q === "small" ? 500 :
 select_m8q3k58q === "medium" ? 800 : 1100
);

// Добавляем бортик если выбран
pizzaPrice = pizzaPrice + (checkbox_m8q4l69r ? 200 : 0);

// Умножаем на количество
pizzaPrice * input_m8q5m70s

Использование готовых шаблонов

Как загрузить шаблон

  1. Перейдите на вкладку "Шаблоны"
  2. Выберите нужный калькулятор из списка
  3. Нажмите "Загрузить шаблон"
  4. Настройте параметры под свои требования
  5. Экспортируйте готовый калькулятор

Как создать свой шаблон

Чтобы сохранить свой калькулятор как шаблон:

  1. Настройте все элементы и формулу
  2. На вкладке "Экспорт" нажмите "Сохранить конфигурацию"
  3. Переименуйте файл (например, мой-шаблон.json)
  4. Для использования - загрузите через "Загрузить конфигурацию"
Совет: Храните свои шаблоны в отдельной папке для удобства.

💡 Лучшие практики

  • Начинайте с готовых шаблонов для быстрого старта
  • Адаптируйте шаблоны под свои нужды (изменяйте цены, параметры)
  • Тестируйте калькулятор после каждого сложного условия
  • Сохраняйте промежуточные версии через JSON-экспорт
  • Используйте клонирование для похожих элементов

Ещё конструкторы

Конструктор обложек для ВК и ОК
Конструктор CSS Grid

Версия: 28.03.25