html код калькулятора расчета стоимости

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

В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание jаvascript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума.

Допустим имеется ситуация, когда копания продает один бренд линолеума. Для создания калькулятора на jаvascript потребуется узнать у пользователя длину и ширину для расчета площади помещения.

Создание формы для HTML для калькулятора

В первую очередь мы создаем форму, состоящую из двух полей для расчета площади.

Первое поле – ширина:

Такое же поле для длины:

В оба поля мы добавляем идентификатор для того, чтобы наш скрипт мог легко получить введенные данные.

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

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

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

Расчет стоимости линолеума

Создание 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 +» р.»;
>

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

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

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

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

Все это мы подставим в 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
>

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

Расчет стоимости линолеума

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

Источник

Скрипт калькулятора стоимости

Пункты, которые нужно заполнять пользователям

Событие oninput происходит когда элемент меняет своё значение в момент фокуса.

Добавим выпадающий список

Событие onchange происходит когда элемент меняет своё значение на момент потери фокуса. Видно в IE. Поэтому если присутствуют два разных типов input, к которым лучше применить разное событие, выносим скрипт за форму.

Добавим чекбокс type=»checkbox»

Событие onclick происходит при щелчке левой клавишей мышки на элементе. На основе этого скрипта.

Добавим флажок type=»radio»

То же самое, что и выше.

Проверка на целое число javascript

Столкнулась в этом примере, поскольку года, которые делятся на 4 без остатка, являются високосными (искл. каждый сотый год, но не каждый четырёхсотый). Условие такое:

parseFloat возвращает дробное число,
parseInt возвращает целое число.

Смена select в зависимости от установленного флажка

35 комментариев:

но пока не всеми браузерами поддерживается 🙁 NMitra Позволяет вводить только числа:

То есть в первом случае функция исполняется после какого-то действия. Во-втором, после загрузки страницы или выполнения какого-то действия (нажатия, фокуса, изменения значения и т.п.)
FOMUVI Второй вариант самый подходящий 🙂 спасибо! Доделал. Пошёл дальше читать ваши уроки. Анонимный Спасибо за урок. А не подскажите, как правильно использовать функцию math.ceil? Использую её в скрипте:
function insertTotal() <
if (edizm.value==»1″) <
var per=id.value /dltr;
var perr= math.ceil(parseFloat(per));
var count = perr*dltr* vespm;

total.innerHTML = ‘Эквивалентно: ‘ + count +’тн’;
> else <
var count = id.value / vespm;

function changeText() <
var bill1 = 0;
var bill = 0;
var fullbill = 0;
var fullbill1 = document.getElementById(‘fullbill1’).value;
var firstAccount = document.getElementById(‘firstAccount’).options[document.getElementById(‘firstAccount’).selectedIndex].value;
var firstPc = document.getElementById(‘firstAccount’).options[document.getElementById(‘firstAccount’).selectedIndex].id;

bill1 = parseFloat(fullbill1);
bill1 = bill1-bill1*parseFloat(firstPc)/100;
bill = bill1;
fullbill = parseFloat(fullbill1);

document.getElementById(‘bill1’).innerHTML = bill1;
document.getElementById(‘bill’).innerHTML = bill;
document.getElementById(‘fullbill’).innerHTML = fullbill;

.
а вот процедура выбора:

и в идеальном варианте, мне бы куда-нибудь приткнуть hidden поле ввода для <$bill1>, не могу придумать, как сделать, чтобы оно заполнялось полученным значением.
А дальше я его уже сохраню при помоpщи php Tatiana Bokareva н-да. что-то не опубликовалась Tatiana Bokareva
вот она: http://jsfiddle.net/fsLn9w7m/ NMitra Эх, всё равно не поняла, так?

document.getElementById(‘dva’).onclick = raz;
raz();
function raz() <
alert(1+2);
>

Есть ещё вариант http://shpargalkablog.ru/2013/06/localStorage.html но я бы в данном случае использовала первый (если правильно поняла проблему). Tatiana Bokareva Попробую с local storage. Мне кажется, первый вариант немного про другое, т.к. число вводится пользователем уже после открытия страницы. Спасибо за помощь! )) Tatiana Bokareva В общем я поняла, что у меня так и не получилось выразить свою мысль ))) Заполнение поля сделала вот так:

http://jsfiddle.net/fsLn9w7m/ NMitra Главное, что всё что хотелось, удалось 🙂 Тимур Сарсембаев Здравствуйте. Просьба подсказать решение.
Нужно сделать простой калькулятор, но вот знаний не хватает.

Налоговый режим
Упрощенный
Общеустановленный
Кассовый аппарат
Да
Нет
Рассчитать

Источник

Простой калькулятор на JavaScript

Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.

Что делаем

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

Логика работы

Так как это простой калькулятор, то поступим так:

Размещаем кнопки и поля ввода на странице

Разместим кнопки с полями на странице, а потом будем писать скрипт.

Обрабатываем нажатия на кнопки математических действий

Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?

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

Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.

👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.

Пишем скрипт

Сам скрипт тоже будет простой:

Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:

Выводим результат

Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.

Это — добавим на страницу после кнопки с расчётом:

А это — в функцию func(), чтобы она сразу отправляла результат на страницу:

Собираем всё вместе и смотрим результат

Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.

Что дальше

Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

if(a Александр Маврин :

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

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

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

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

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

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

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

Это уже из разряда сложных. Есть пример, но попроще: bumkart73.ru/#calc

Спасибо за ссылку. Интересное решение.

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

У вас скорее всего в HTML косяк. Напишите мне в телегу, чтобы здесь не захламлять страницу: https://t.me/Mavrinn

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

Источник

Онлайн-калькулятор на сайт: выбор готового виджета

UPDATE: 29 июня 2021
Добавлены новые виджеты калькуляторов.

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

Где применить онлайн-калькулятор?

В некоторых отраслях калькуляторы на сайтах начали применяться задолго до моды на «виджетизацию». Например, в строительных услугах и продаже строй-материалов:

Другие сферы, где очень часто можно встретить онлайн-расчеты: кредиты, страховка, продажа автомобилей, продажа билетов и туров, службы такси и грузоперевозок, клининг и так далее. Калькулятор можно внедрить практически в любую сферу бизнеса. Это добавит сайту интерактива и поможет собирать больше заявок.

Чтобы открыть сервис в новой вкладке — нажмите на заголовок.

Moclients.com

Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.

Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.

Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.

Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.

Сайт предоставляет 5 различных способов оплаты, техническая поддержка быстро консультирует через чат или почту. Я сам пользуюсь этим виджетом несколько месяцев и мой отзыв: стоит попробовать. Встречались ошибки в программной/фронт-енд части, но их довольно быстро устраняли. Интерфейс админ-панели можно назвать «сыроватым».

uCalc.pro

Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.

Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.

FormDesigner

Многофункциональный конструктор форм. В простом редакторе можно собрать опросы, квизы, калькулятор и различные веб-формы заявки. Отличительная особенность — огромное количество шаблонов под все сферы бизнеса.

Каждый шаблон можно отредактировать:

ФормДизайнер — полноценный калькулятор с формулами, он действительно может считать. Для расчета значения в конструкторе есть специальный элемент «Формула», в котором можно настроить самые сложные формулы.

При этом сами формы имеют качественный дизайнер, а интерфейс настройки максимально простой. Можно интегрировать формы с сервисами E-mail рассылки, CRM и CMS-системами. Интеграций много. Мы написали отдельный обзор на данный сервис.

Calccreator.com

Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.

Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.

Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.

BitCalc

Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.

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

Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.

Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.

Web-forms.ru

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

В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.

Вывод

Я бы рекомендовал поочередно попробовать на своем сайте виджеты калькуляторов от Moclients и uCalc. Первый, собирающий заявки, второй, производящий реальные расчеты. Обязательно проработать дизайн, шаги, настроить интеграцию с Яндекс Метрикой/Google Analytics для отслеживания эффективности. Если вы планируете разрабатывать калькуляторы своими руками, для клиентов под заказ, и вам важно получить исходный код — Calccreator.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник