Пример простого калькулятора
|
Автор: Артемьев Сергей Игоревич 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> </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().
