HTML, Excel, Word, SEOОсновы JavaScript ⇒ Пример простого калькулятора

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney

Купить Калькуляторы ситизен в Москве по выгодным ценам.

Пример простого калькулятора


Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru

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

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

Для начала создадим HTML-код для нашего калькулятора:

<style type="text/css">
   	.tblCalc{
 		border:1px solid gray;
 		margin:0;
 		padding:0;
 		width:250px;
 		text-align:center;
 	}
 	.tblCalc input{
 		border:1px solid gray;
 		width:30px;
 		margin:4px;
 	}
	 	#btnWide{
 		width:80px;
 	}
 	#editWide{
 		width:250px;
 	}
</style>


<form name="calc" action="">
     <table class="tblCalc" cellpadding=0 cellspacing=0>
     <tr>
         <td colspan=5 align=middle>
         	<input id="editWide" name="ReadOut" type="Text"
              	size=28 value="0" width="250px">
         </td>
     </tr>
     <tr>
         <td colspan="3"></td>
         <td><input name="btnClear" type="Button"
          	value="C" onclick="Clear()" /></td>
         <td><input name="btnClearEntry" type="Button"
          	value="CE" onclick="ClearEntry()" /></td>
     </tr>
     <tr>
         <td><input name="btnSeven" type="Button"
          	value="7" onclick="NumPressed(7)"></td>
         <td><input name="btnEight" type="Button"
          	value="8" onclick="NumPressed(8)"></td>
         <td><input name="btnNine" type="Button"
          	value="9" onclick="NumPressed(9)"></td>
         <td><input name="btnPlus" type="Button"
          	value="+" onclick="Operation('+')" /></td>
         <td><input name="btnMultiply" type="Button"
          	value="*" onclick="Operation('*')" /></td>
       </tr>
     <tr>
         <td><input name="btnFour" type="Button"
          	value="4" onclick="NumPressed(4)"></td>
         <td><input name="btnFive" type="Button"
          	value="5" onclick="NumPressed(5)"></td>
         <td><input name="btnSix" type="Button"
          	value="6" onclick="NumPressed(6)"></td>
         <td><input name="btnMinus" type="Button"
          	value="-" onclick="Operation('-')" /></td>
         <td align=middle><input name="btnDivide" type="Button"
          	value=" / " onclick="Operation('/')" /></td>
     </tr>
     <tr>
         <td><input name="btnOne" type="Button"
          	value="1" onclick="NumPressed(1)"></td>
         <td><input name="btnTwo" type="Button"
          	value="2" onclick="NumPressed(2)"></td>
         <td><input name="btnThree" type="Button"
          	value="3" onclick="NumPressed(3)"></td>
         <td><input name="btnPercent" type="Button"
          	value="%" onclick="Percent()" /></td>
         <td align=middle>&nbsp;</td>
     </tr>
     <tr>
         <td><input name="btnZero" type="Button"
          	value="0" onclick="NumPressed(0)"></td>
         <td><input name="btnDecimal" type="Button"
          	value="." onclick="Decimal()"></td>
         <td><input name="btnNeg" type="button"
          	value="+/-" onclick="Neg()" /></td>
         <td colspan="2"><input id="btnWide" name="btnEquals"
          	type="Button" value="=" onclick="Operation('=')"></td>
     </tr>
     </table>
</form>





Получим следующий вид:

 

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


<script language="JavaScript">
var Fcalc = document.calc;
var Currents = 0;
var FlagNewNum = false;
var PendingOp = "";
// обработчик нажатия // цифровой кнопки function NumPressed (Num)
{
if (FlagNewNum)
{
Fcalc.ReadOut.value = Num;
FlagNewNum = false;
}
else
{
if (Fcalc.ReadOut.value == "0")
Fcalc.ReadOut.value = Num;
else
Fcalc.ReadOut.value += Num;
}
}
// обработчик нажатия // кнопки действия
function Operation (Op)
{
var Readout = Fcalc.ReadOut.value;
if (FlagNewNum && PendingOp != "=") { Fcalc.ReadOut.value = Currents; }
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Currents += parseFloat(Readout);
else if ( '-' == PendingOp )
Currents -= parseFloat(Readout);
else if ( '/' == PendingOp )
Currents /= parseFloat(Readout);
else if ( '*' == PendingOp )
Currents *= parseFloat(Readout);
else
Currents = parseFloat(Readout);
Fcalc.ReadOut.value = Currents;
PendingOp = Op;
}
}
// добавление десятичной точки с числу
function Decimal ()
{
var curReadOut = Fcalc.ReadOut.value;
if (FlagNewNum)
{
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
Fcalc.ReadOut.value = curReadOut;
}
// Очистка текущего результата
function ClearEntry ()
{
Fcalc.ReadOut.value = "0";
FlagNewNum = true;
}
// Полная очистка всех результатов
function Clear ()
{
Currents = 0;
PendingOp = "";
ClearEntry();
}
// меняем знак текущего результата
function Neg ()
{
Fcalc.ReadOut.value =
parseFloat(Fcalc.ReadOut.value) * -1;
}
// вычисляем значение процентов
function Percent ()
{ Fcalc.ReadOut.value =
(parseFloat(Fcalc.ReadOut.value) / 100) *
parseFloat(Currents);
}
</script>

Скрипт достаточно логичен и прост для понимания, стоит лишь немного в нём разобраться. Здесь использована форма и элементы ввода типа "text" и "button", причем к последним привязаны наши собственные обработчики.

Для тренировки попробуйте добавить в этот калькулятор инженерные функции, например, вычисление квадратного корня и возведение в степень. Подсказка: необходимо будет добавить соответствующие кнопки и внести изменения в функцию Operation().



В начало страницы



В начало страницы