Главная » Создание сайтов » Программирование » Простой онлайн калькулятор на JavaScript

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

От делать нечего(хотя вру, делать было что) решил сделать простенький калькулятор на JavaScript. Только сложение(+). Вот кстати он сам:


Введите число 1

Введите число 2
Результат

Теперь, пошагово я постараюсь объяснить как это сделать.

Создание формы.

Форму создавать, я думаю, каждый сможет. Если нет, то это всего лишь один тег <form>.Но нужно, как вы уже догадались, использовать еще и input. Вписываем определенный слова перед ними и все, дальше только начинять их. Вот что у меня вышло:

<form>
Введите число 1 <input type="text" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text"></form>

Как видите я добавил к инпут две функции. Onchange и onkeyup. Onkeyup должен(в данном случае) убирать все значения при вводе их в форму кроме цифр. А onchange должен убирать все значения при вставке их в форму. Конечно если я правильно понял.

Форма наша пости готова, осталось создать функцию калькулятора и добавить переменные в form. Выделим например 1-ому числу имя «a»(Лат.). 2-ому «b»(Лат.). А выходному «total». Вот что у меня получилось:

<form>
Введите число 1 <input type="text" name="a" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" name="b" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text" name="total"> </form>

Ах да. Забыл... Ведь после этой формы(см. выше), «Расчитать» не убедт иметь никакого значения. Просто будет нажиматься. Но и задавать ему функцию калькулятора нету пока смысла, так как функции еще нету =). Поэтому приступим к созданию мозга калькулятора. Создаем javascript и сразу даем ему название:

<script lang="JavaScript">
function calculator(form) {
}
</script>

Вместо слова calculator можно вводить что угодно, напрмиер evgen.

В нашей функции создаем перменные, которые ранее мы добавили в форму:

a = eval(form.a.value); //Присваем a значение из первого поля
a b = eval(form.b.value); //Присваем b значение из второго поля b
c = a+b; //Слаживаем занчения a и b
form.total.value = c; //Выдаем результат

Все это надо поместить между скобками внутри функции. То есть вот так:

<script lang="JavaScript">
function calculator(form) {
a = eval(form.a.value);
b = eval(form.b.value);
c = a+b; form.total.value = c;
}
</script>

Теперь, с готовым мозгом, можно задать функцию «расчитать». Для это возвращаемся к форме и ищем следующую строку:

<input type="button" value="Рассчитать">

Добавляем к ней onclick="calculator (this.form)". Тоесть при клике на эту кнопку, воспроизведется функция calculator! Вот и весь калькулятор...

<script lang="JavaScript">
function calculator(form) {
a = eval(form.a.value);
b = eval(form.b.value);
c = a+b;
form.total.value = c;
}
</script>
<form>
Введите число 1 <input type="text" name="a" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" name="b" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать" onclick="calculator(this.form)">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text" name="total">
</form>

P.S. Design-mania, красивый набор иконок.

С уважением, Vasilenko Ivan!

Комментарии — 32 комментария

  1. #6176 crgn в 22:18, 25 сентября 2009:

    Ответить | Цитировать

    Спасибо!

  2. #6868 loli в 19:56, 9 октября 2009:

    Ответить | Цитировать

    а как подправить, чтоб на автомате результат выдовал — без клика на результат

  3. #6869 WebMast в 20:20, 9 октября 2009:

    Ответить | Цитировать

    loli, можно повесить функцию на onblur (когда с форму убрали активность) либо делать по таймеру... Больше я не знаю как.

  4. #7448 Gikkk в 13:48, 23 октября 2009: (подписался)

    Ответить | Цитировать

    Помогите!! калькулятор типо сделал но мне надо не такой а вот такой:

    <i> Жарков Александр Павлович </i>

    но я не могу разобраться как минус и плюс сделать помогите плизз

  5. #7449 Gikkk в 13:49, 23 октября 2009: (подписался)

    Ответить | Цитировать

    Жарков Александр Павлович

  6. #7474 WebMast в 18:54, 24 октября 2009:

    Ответить | Цитировать

    Никак не могу понять, какой все-таки калькулятор вам нужен?

  7. #7905 all в 20:03, 3 ноября 2009:

    Ответить | Цитировать

    И все таки просьба выложить тоже самое, только с выводом результата без нажатия на кнопку «Расчитать» и вообще без этой кнопки. По типу как на сайте www.ru.convert-me.com/ru/convert/weight — там в поле вводишь значение, а в остальных автоматом считается все и выводится.

  8. #7973 WebMast в 17:34, 6 ноября 2009:

    Ответить | Цитировать

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

  9. #9243 devil в 16:13, 13 января 2010:

    Ответить | Цитировать

    помогите не работает(канкулятор)

    function recalc ()

    {

    a=document.f1.p1.value;

    b=document.f1.p2.value;

    c=a*b;

    document.f1.p3.value=c

    }

    *

  10. #9244 WebMast в 17:44, 13 января 2010:

    Ответить | Цитировать

    devil, код, работающий с input, должен находится в form. Значит и функция должна быть привязана к форме. В селекторах убрать цифры и привязывать не к документу, а опять же к форме.

  11. #9422 саша в 1:26, 4 марта 2010:

    Ответить | Цитировать

    спасибо автору!

  12. #9603 Александр в 15:35, 12 апреля 2010: (подписался)

    Ответить | Цитировать

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

    интегрировать этот калькулятор на страничку.

    Закинуть в корневую папку сайта в формете .js, или же вставить в html код страницы, или вообще нужно несколько файлов использовать?

  13. #9604 Александр в 17:04, 12 апреля 2010: (подписался)

    Ответить | Цитировать

    Вставляю в html код страницы, вводятся числа, первое и второе, есть проверка вводимых даных ( отсекает всё кроме цифр), но не считается результат, в чём может быть проблема?

  14. #9606 WebMast в 11:54, 13 апреля 2010:

    Ответить | Цитировать

    Александр. Вставлять нужно в html.

  15. #9608 Александр в 9:26, 14 апреля 2010: (подписался)

    Ответить | Цитировать

    Вставил, не работает...

    Странно, но сообщение в окошке ( тож на js ) работает нормально, но вот не считает почему то калькулятор, не выводит результат, хотя проверка введённых данных работает нормально

  16. #9612 WebMast в 7:15, 16 апреля 2010:

    Ответить | Цитировать

    Даже нет идей, в чем может быть проблема.

  17. #9853 MrZlo в 16:11, 2 июля 2010:

    Ответить | Цитировать

    Спасибо за урок! Очень помогло. Можете глянуть на моем сайте )

  18. #10166 Григорий в 18:17, 26 августа 2010:

    Ответить | Цитировать

    Чтобы пересчет производился при переходе с поля, нужно через точку с запятой добавить calculator (this.form) в onchange. Т.е. для первого поля будет: onchange="this.value=this.value.replace (/([^0-9])/g,''); calculator (this.form)", для второго — аналогично. Если же хотите, чтобы рассчет производился после ввода каждого символа, а не в момент перехода на другое поле, тогда ту же calculator (this.form) нужно вставлять в onkeyup: onkeyup="var n=this.value.replace (/([^0-9])/g,''); if (n!=this.value) this.value=n; calculator (this.form)"

  19. #10167 Григорий в 18:19, 26 августа 2010:

    Ответить | Цитировать

    Автору большое спасибо за отличный пример — никогда не писал подобного, тут за 5 минут разобрался...

  20. Григорий, спасибо за дополнительную информацию и за отзыв.

  21. #10957 Nik в 11:51, 9 февраля 2011: (подписался)

    Ответить | Цитировать

    Спасибо большое за пример, я добавляю третью переменную точно так же, и скрипт перестает работать, может нужен совсем другой алгоритм?

  22. #10958 Nik в 11:59, 9 февраля 2011: (подписался)

    Ответить | Цитировать

    а нет, разобрался, все то же самое)

  23. #10960 Ню в 22:07, 9 февраля 2011: (подписался)

    Ответить | Цитировать

    Хм... а как сделать потом отправку на емайл? то есть — value

  24. #11282 marsel в 23:56, 3 апреля 2011:

    Ответить | Цитировать

    Добрый день! Подскажи как в калькулятор вставить функцию «если» (пример А менише 20 или больше и равно 5 то ? " Буду очень благодарен за помощь.

  25. #11717 Алексей в 1:18, 19 июня 2011: (подписался)

    Ответить | Цитировать

    Суммирование значений атрибута value всех отмеченные radio, checkbox и text (при определенных условиях) и вывод их суммы

    <!--

    function sums ()

    {

    sum=0;

    sum1=0;

    sum2=0;

    sum3=0;

    sum4=0;

    sum5=0;

    for (i=1;i

    Задайте размеры помещения

    м

    размеры

    площадь

    Ширина

    Площадь пола

    Длинна

    Площадь стен

    Высота

    Общяя площадь

    Демонтаж старой поверхности

    руб.

    Выравнивание поверхности

    руб.

     

     

     

     

     

     

    text 8

    text 9

    text 10

    text 11

    text 12

    text 13

    text 14

    text 15

    Сумма:

  26. #18915 Дежурный в 10:45, 12 марта 2013:

    Ответить | Цитировать

    спасибо автору, вставил - получилось, добавил еще поля для расчета - получилось...

    появилась мысль...

    если, можно, то подскажите как сделать, так чтобы в поле [введите число] выподал список с цифрами и комментариями к ним...

    например:

    [хлеб] - дарницкий 30,00 руб

    — бородинский 35,00 руб

    [батон] - нарезной 38,00 руб

    — молочный 35,00 руб

    и т.д.

    [Рассчитать] [Сбросить]

    Спасибо...

  27. #21225 Mary в 16:21, 4 июля 2013: (подписался)

    Ответить | Цитировать

    Здравствуйте!

    Спасибо за калькулятор!

    При первой вставке в HTML все работало отлично...

    После удаления, копирую, вставляю заново — кнопка Рассчитать теперь не работает(((

    В чем может быть дело?

    Еще, подскажите, как сделать, чтобы вписывались и считались десятичные числа?

    Как вставить более сложный расчет? (например: с = ((a+15)*1,1+(b*500))*1,15*5,5)

  28. #33207 Ирина в 7:11, 19 августа 2014: (подписался)

    Ответить | Цитировать

    Подскажите, как правильно прописать в скрипте значение a , чему оно должно быть равно,

    если в форме несколько значений:

    Первый

    Второй

  29. #33208 Ирина в 7:15, 19 августа 2014: (подписался)

    Ответить | Цитировать

    Подскажите, как правильно прописать в скрипте значение a , чему оно должно быть равно,

    если в форме несколько значений: input type="radio" name="a" value="1">Первый, input type="radio" name="a" value="2">Второй,

  30. #54693 Алекс в 22:09, 17 апреля 2016: (подписался)

    Ответить | Цитировать

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

  31. #56376 Андрей в 17:05, 5 июля 2016: (подписался)

    Ответить | Цитировать

    Привет, коллеги!

    Меня зовут Андрей Алёшин. Я представляю команду сервиса по созданию калькуляторов для сайтов CalcCreator.com (конструктор калькуляторов)

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

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

    На этом мой комментарий завершён, хорошего дня и если до читали до этого места, дайте, плз, обратную связь, как вам сервис и как вы можете его использовать у себя?

  32. #56397 vanoID в 12:56, 6 июля 2016:

    Ответить | Цитировать

    @ Андрей:

    спасибо за комментарий! Думаю, моим читателем будет полезен Ваш сервис.

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя