Простой онлайн калькулятор на 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. #56376 Андрей в 17:05, 5 июля 2016: (подписался)

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

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

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

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

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

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

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting