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

javascript calculator расчет

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

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

Для начала создадим 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().