Немного обо всем интересном
На главную Обратная связь Поиск
Главная
Форум
 
 
 
  Статьи Файлы Видео Кулинарные рецепты Города и Страны Разное  
Отдых и развлечения Юмор Видео, ТВ и музыка Непознанное Литература Спорт Игры Хобби
Окружающий мир Люди Страны и города География Флора и фауна Космос
Технологии Hardware Операционные системы Софт Интернет Мобильные устройства Сети и сетевая безопасность Разное
Дизайн и программирование Веб-строительство Дизайн и графика

Все статьи Список статей Добавить статью
 
Вниз
Простой калькулятор на JavaScript


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

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

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


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


   

Результат

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


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

Сначала созданим 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 я далеко не профи, поэтому строго не судите за статью.


Данные:
Просмотров: 49823
Рейтинг: 269
Голосов: 34
Средний бал: 7.91
Комментариев: 13
Добавлен: 03.03.2008

Оценить:

Функции:



Шрифт:   +  -

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

Разместил гость Юся..26.12.2010

а вот мне нужнен не просто калькулятор, а что бы там еще были кнопки проценты счиатать, убирать последний символ, последний введеный элемент,деление,умножение и тд..
Разместил гость John18.11.2010

Прива.
Есть проблема. Не могу вставить сотые доли чисел, onClick="getNumbers(this.form, 0) как здесь сказано не дает вставлять в форму буквы и символы... Так вот надо вставить например (0.005). Спасиб.
Разместил гость panFX27.08.2010

СП помог решить некий вопрос
Разместил гость Absolut23.06.2010

Спасиб, все просто и понятно.
Разместил гость игорь28.01.2010

ребята
мне надо чтоб можно было 5 чисел вводить

незнаю что поменять

пытался

помогите

Разместил гость igor23.11.2009

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

http://ru.proauto.eu/calc/plz.html
Разместил гость 6зс07.11.2009

оч помог!!!!
Разместил гость Azod02.11.2009

спс
Разместил гость val20.06.2009


Разместил гость Sanches27.05.2009

Александр, спасибо тебе и респект!
Очень понятно и наглядно получается у тебя писать
Разместил гость sandro13.05.2009

СП
Разместил гость Алексей19.02.2009

Вот спасибо огромное! Ни в яве, ни в пхп ни бум-бум. Второй день искал подобную вещ! Разобрался и подстроил под свои нужды в 2 счета!
Разместил гость Рита18.12.2008

Молодец! Очень пригодилось. Спасибо
 
Добавить комментарий:

Оставлять комментарии могут только зарегистрированные пользователи.
Возможно заинтересует: • 
Вверх
2006-2010 Интересное.инфо.
При использовании или копировании материалов не забываем ссылку на http://interesnoe.info