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

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

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

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

Такой калькулятор вряд ли вам пригодиться, но вы сможете легко изменить его, подставив свои формулы.

Теперь подробнее о том, как он устроен.

Сначала созданим JavaScript


<SCRIPT LANGUAGE="JavaScript">



function calculator(form) {//Функция подсчета

a = eval(form.a.value); //Присваем a значение из первого поля a

b = eval(form.b.value)+a; //Присваем b значение из второго поля b и прибаляем к нему a

c = b*5; //Присваем с значение и b (к которому мы уже прибавили a) и умножаем на 5

form.total1.value = c; //выдаем результат

}



function getNumbers(f, val) //Функция для вставления в поле b цифр из кнопок

{

  f.b.value += val;

}

function getNumbers2(f, val) //Функция для вставления в поле a цифр из кнопок

{

  f.a.value += val;

}

</SCRIPT>

Теперь создадим форму:


<form>

Введите число 1 <input type="text" name="a" size="15" 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;" onmousedown="this.value=this.value.replace(/([^0-9])/g,'');"><br>

<INPUT TYPE="button" VALUE="1" onClick="getNumbers2(this.form, 1)"><INPUT TYPE="button" VALUE="2" onClick="getNumbers2(this.form, 2)"><INPUT TYPE="button" VALUE="3" onClick="getNumbers2(this.form, 3)"><INPUT TYPE="button" VALUE="4" onClick="getNumbers2(this.form, 4)"><INPUT TYPE="button" VALUE="5" onClick="getNumbers2(this.form, 5)"><INPUT TYPE="button" VALUE="6" onClick="getNumbers2(this.form, 6)"><INPUT TYPE="button" VALUE="7" onClick="getNumbers2(this.form, 7)"><INPUT TYPE="button" VALUE="8" onClick="getNumbers2(this.form, 8)"><INPUT TYPE="button" VALUE="9" onClick="getNumbers2(this.form, 9)"><INPUT TYPE="button" VALUE="0" onClick="getNumbers2(this.form, 0)">



<br><br>



Введите число 2 <input type="text" name="b" size="15" 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;" onmousedown="this.value=this.value.replace(/([^0-9])/g,'');"><br>

<INPUT TYPE="button" VALUE="1" onClick="getNumbers(this.form, 1)"><INPUT TYPE="button" VALUE="2" onClick="getNumbers(this.form, 2)"><INPUT TYPE="button" VALUE="3" onClick="getNumbers(this.form, 3)"><INPUT TYPE="button" VALUE="4" onClick="getNumbers(this.form, 4)"><INPUT TYPE="button" VALUE="5" onClick="getNumbers(this.form, 5)"><INPUT TYPE="button" VALUE="6" onClick="getNumbers(this.form, 6)"><INPUT TYPE="button" VALUE="7" onClick="getNumbers(this.form, 7)"><INPUT TYPE="button" VALUE="8" onClick="getNumbers(this.form, 8)"><INPUT TYPE="button" VALUE="9" onClick="getNumbers(this.form, 9)"><INPUT TYPE="button" VALUE="0" onClick="getNumbers(this.form, 0)">

        

<br><br><input type="button" value="Рассчитать" onClick="calculator(this.form)">   <input type="reset" value="Сброс"><br>



<br>Результат <input type="text" name="total1" size="20" maxlength="40">



</form>

Теперь расшифруем нашу форму:

Первому текстовому полю присваиваем имя a, второму - имя b, а результату total1 (ими мы и оперируем в скрипте).

Код:


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;" onmousedown="this.value=this.value.replace(/([^0-9])/g,'');"

Не дает нам вставлять в форму буквы и символы, а разрешает только цифры.

Код:


onClick="getNumbers(this.form, 0)"

Вставляет в форму число, через соотв. функцию в JS

Вроде ничего не пропустил. В JS я далеко не профи, поэтому строго не судите за статью.

Данные:

Рейтинг: 269

Голосов: 34

Средний бал: 7.91

Комментариев: 13

Добавлен: 03.03.2008

Оценить:

Функции:

Шрифт:

Автор: Alexander-V-Sh

Разместил: Alexander-V-Sh
Посмотреть все статьи этого пользователя