Как сделать калькулятор в HTML

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

Основная проблема любых интерактивных форм и онлайн-расчётов – это математический аппарат и логика, которые стоят за работой web-интерфейса. Если простейшие формы и элементы ввода может реализовать практически любой школьник (всё это «голый» HTML: чекбоксы, флажки, ползунки, поля и т.п.), но вот с алгоритмом расчёта и обработкой введённых данных всё не так просто.

В настоящее время большинство сайтов создаётся с помощью онлайн-конструкторов, CMS-систем или фреймворков (последние рассчитаны только на профи). К любому из таких сайтов в 99% случаев можно добавить свой HTML-код. Обычно это делается либо с помощью специальных блоков, либо благодаря прямому доступу к коду шаблонов.

Где взять код калькулятора или как его вообще получить/создать? Для этого есть всего несколько доступных способов (разумеется, для новичков и начинающих web-мастеров):

1. Использование специальных онлайн-сервисов, таких как uCalc (наш обзор).
2. Использование профильных плагинов и расширений (подбираются или пишутся на основе API вашей CMS-системы / фреймворка).
3. Создание HTML-форм и скриптов расчёта вручную (для этого нужно задействовать языки программирования PHP, JavaScript и т.п., всё зависит от возможностей и настроек вашего сервера).

Единственный универсальный вариант для любого типа сайтов – сервисы создания онлайн-калькуляторов. Рассмотрим процедуру в разрезе использования uCalc и чистого HTML+JavaScript.

Как сделать онлайн-калькулятор для HTML-сайта в uCalc

uCalc – это лучший претендент на роль профильного конструктора сложных форм и интерактивных калькуляторов. Здесь есть всё, что нужно и даже немного больше: инструменты для приёма платежей, SMS и email-рассылки, возможность интеграции сторонних сервисов, таких как CRM-системы.

Сами калькуляторы создаются в специальном графическом редакторе, который легко осваивается без какого-либо опыта программирования или навыков web-разработки. Нужные элементы просто перетягиваются мышкой и настраиваются. Логика обсчёта может быть как максимально простой, так и очень сложной – всё зависит только от ваших желаний и требований.

Для быстрого старта есть готовые шаблоны. Калькуляторы можно публиковать самостоятельно (будут доступны при переходе по прямой ссылке), встраивать в любые HTML-страницы, интегрировать в конструкторы сайтов (подходят любые популярные платформы, например, uKit, Wix, mottor, Tilda и т.п.), а также можно делиться ссылкой в мессенджерах, соцсетях, рассылках и т.п.

Условно общий алгоритм создания калькулятора выглядит следующим образом:

1. Вы создаёте калькулятор в редакторе uCalc (настраиваете внешний вид и логику).
2. Получаете HTML-код формы.
3. Встраиваете виджет калькулятора в нужную вам страницу в нужном месте.

Теперь каждый шаг рассмотрим детально.

Непосредственно создание формы/калькулятора в uCalc

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

Нажмите кнопку «+» в панели управления (страница «Мои формы»).

Рекомендуем начать с готового тематического шаблона (пункт «Использовать шаблон»). Так вам будет проще разобраться с возможностями конструктора.

Шаблоны можно отфильтровать по популярности или по заданной тематике («Экономика и финансы», «Автосервис», «Строительство и ремонт», и т.п.).

Понравившуюся форму можно посмотреть в деле – для этого нажмите кнопку «Посмотреть».

Если вас всё устраивает – нажмите пункт «Выбрать» (или кнопку «Создать калькулятор» в режиме предпросмотра шаблона).

В случае, если вы выберете пункт «Собрать самостоятельно», сразу попадёте в режим редактирования, но без готовых элементов ввода и формул. Всё, что вам нужно, придётся собирать с нуля.

Окно редактора по умолчанию открывается на вкладке «Дизайн». Здесь вы можете перемещать элементы ввода, добавлять свои или удалять ненужные, настраивать их свойства:

• Фон и цветовые схемы;
• Темы оформления;
• Положение;
• Шрифт;
• Тип полей;
• Заголовки и описания;
• Отступы;
• Необходимость и логика округления результатов;
• Наличие разделителей разрядов (для видимых результатов);
• И т.п.

Наибольшее количество возможностей у кнопок. Здесь есть настройки показа уведомлений и их отправки владельцу формы или клиенту, который её заполнил (в SMS или в email-сообщении), антиспам, согласие на сбор персональных данных (типовое или собственный текст документа), подключение систем аналитики, онлайн-оплата, обмен данными с CRM и т.д.

Вы можете создавать сложный интерфейс формы, разбитый на несколько шагов/страниц. Логика переходов между этими страницами настраивается отдельно – во вкладке «Логические ветвления».

Наиболее ответственная часть (настройка алгоритма расчёта) вынесена во вкладку «Формула».

Вам будут доступны все самые востребованные математические операции, включая возведение в степень и взятие процента, а также логические операнды (отображаются в расширенном режиме):

• И/ИЛИ;
• ЕСЛИ;
• РАВНО/НЕРАВНО;
• БОЛЬШЕ/МЕНЬШЕ.

С таким набором возможностей вы сможете собрать любую математическую формулу. При наборе формул вы можете пользоваться клавиатурой или только мышкой.

Когда вы закончите с редактированием, нажмите кнопку «Сохранить» (или «Предпросмотр», если вам нужно испытать свой новый калькулятор в действии).

Получение кода калькулятора

uCalc работает по схеме с загрузкой внешнего JavaScript’а. Иными словами, на выходе вы получаете скрипт своей формы, который нужно встроить в код любой страницы. Код полей ввода, логика их обработки, стили оформления и другие свойства подгружаются автоматически – из сервиса uCalc при рендеринге вашей страницы в браузере.

Таким образом, уже созданную форму можно вставлять на любом количестве сайтов и в любое количество страниц. Управление калькулятором будет производиться централизованно – через панель конструктора uCalc. Даже если вы что-то измените во внешнем виде формы или в её логике, код не придётся менять везде, где она используется. Всё это произойдёт автоматически.

Итак, чтобы получить код для вставки онлайн-калькулятора uCalc, вам нужно вернуться на страницу со всеми вашими формами в панели управления и навести указатель на калькулятор. Во всплывающем меню выберите пункт «Получить код» и нажмите кнопку «Скопировать…». Готово! Код формы в буфере обмена.

Вставка кода калькулятора внутрь HTML-страницы

Если вы используете платформу онлайн-конструктора, то в наборе блоков нужно найти элемент с возможностью вставки своего HTML-кода.

Примеры для разных конструкторов:

• Wix: Редактор –> Добавить блок –> Ещё –> HTML-код.
• uKit: перетащите виджет uCalc на страницу, при необходимости привяжите аккаунт uCalc и выберите нужную форму.
• uCoz: переключитесь в режим редактирования HTML (для материалов) или вставьте код в шаблоне.
• Tilda: Добавить блок –> Другое –> HTML-код.

Если вы используете CMS-систему, то вы можете организовать вставку кода с помощью встроенных виджетов (как в WordPress), с помощью встроенных редакторов страниц (если таковой имеется в CMS) или напрямую изменить код шаблона (в любом текстовом редакторе при FTP/SFTP-подключении к хостингу).

Все примеры вставки для готовых движков можно изучить в документации uCalc – здесь.

Если у вас просто HTML-страница, в том числе созданная с помощью оффлайн-конструкторов, то достаточно будет открыть её в любом удобном вам текстовом редакторе и вставить код виджета uCalc в нужном месте.

Будьте внимательны – не нарушайте структуру имеющихся HTML-тегов.

Не забудьте сохранить свои изменения!

Создание калькулятора для HTML-сайта с помощью JavaScript

Этот способ подходит только тем, кто понимает, что делает и как нужно работать со скриптами / HTML-кодом.

Итак, для работы скрипта нужны элементы ввода (инпуты), кнопка, которая будет запускать процедуру расчёта, и место/поле вывода (это может быть любой HTML-элемент, внутри которого будет показываться результат расчёта).

Сначала визуальная составляющая для понятности процедуры. Внутри тегов <!– XXX –> будет написан текст комментария, их можно смело удалить.

 <input id="weight"/> <!—это поле ввода с идентификатором weight --> <br> <!—это просто перенос строки --> <input id="height"/> <!—это поле ввода с идентификатором height --> <br> <!—это просто перенос строки --> <button onclick="calculateArea()">Посчитать площадь...</button> <!—это кнопка, при нажатии которой будет выполнена функция расчёта площади calculateArea --> <br> <p id="result"></p> <!—а это абзац, внутри которого будет выведен результат расчёта--> 

HTML-элементы можно вставить в нужном вам месте страницы и декорировать с помощью CSS-стилей (например, с помощью добавления уже имеющихся CSS-классов).

Теперь написание «логики», то есть скрипта JS, который будет собирать данные из этих двух полей ввода и умножать для получения площади. Комментарии в JavaScript начинаются с «//».

  <script>  function calculateArea(){  var height = Number(document.getElementById("height").value); //находим HTML-элемент на странице с идентификатором height и получаем данные из него  var weight = Number(document.getElementById("weight").value); //находим HTML-элемент на странице с идентификатором weight и получаем данные из него  var result = height * weight; //вычисляем произведение height и weight  document.getElementById("result").innerHTML = result; // находим HTML-элемент с идентификатором result и заменяем его значение на то, что было вычислено выше  } </script> 

Сам скрипт можно вставить в любой части страницы или даже загрузить отдельным файлом. Хотя для простого блока калькулятора вполне допустимо будет совместное написание с HTML – единым текстом.

Наиболее распространённые проблемы при создании своих скриптов

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

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

Ну и наконец – отсутствие комплексного бэкграунда. Такие простенькие JS-скрипты не способны принимать оплату, подстраиваться под ширину окружающих элементов, менять стиль оформления на лету, интегрироваться с CRM-системами и выполнять любые другие дополнительные функции. Всё это можно реализовать в коде, но для этого нужны навыки программирования и детальное знание HTML.

При использовании JavaScript вся логика работы будет видна пользователям (она загружается и отрабатывается браузером). Конечно маловероятно, что кто-то из ваших клиентов полезет изучать ваш код, но вот конкуренты… Особое значение эта проблема приобретает тогда, когда выполняемые в коде функции – это ваше конкурентное преимущество. А ещё такой код легко скопировать к себе на сайт и переделать под свои нужды.

Выход – реализация расчёта в серверной части, например, с помощью PHP. Но тогда нужен специальный хостинг и сам скрипт станет заметно сложнее (так как данные из форм нужно будет отправлять методами POST / GET).

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

Выводы

Если у вас сложная бизнес-логика, то её лучше реализовывать на стороне сервера, так алгоритм будет защищён от чужих глаз. Если логика простая – можно использовать JavaScript. Но в любом случае с написанием и редактированием собственных скриптов справятся только профи (web-разработчики или программисты).

Если у вас нет денег на программистов, но нужен красивый и качественный онлайн-калькулятор, логично для его создания использовать специальный сервис, такой как конструктор uCalc. Последний надёжно защищает алгоритм расчёта и позволяет реализовать массу вспомогательных функций. Но самое главное, все действия можно сделать своими руками (без привлечения сторонних специалистов). Хотя и услуги разработки калькуляторов под ключ тоже имеются.

• Автор: Дмитрий Луценко

Источник: uguide.ru