简单的数学计算器使用jquery

Question

这是我的代码，我想通过按键盘上的键和简单的解决方案来使用它相同将有所帮助。我也应该能够进行多次计算。例如。 2 + 2 +→4 + 2 +→6 + 2 =→8。

HTML：

<div id="main"> 
    <h2>Simple Calculator</h2> 

    <input id="Result" type="number" /> 
    <div id="keys"> 
     <div id="FirstRow"> 
      <button id="ClearAll" type="reset" value="CE" class="clean">CE</button> 
      <button id="Clear" type="reset" value="C" class="clean">C</button> 
      <button id="Add" type="button" value="+" class="operators operand">+</button> 
     </div> 
     <div id="SecondRow"> 
      <button id="One" type="button" value="1" class="Show">1</button> 
      <button id="Two" type="button" value="2" class="Show">2</button> 
      <button id="Three" type="button" value="3" class="Show">3</button> 
      <button id="Sub" type="button" value="-" class="operators operand">-</button> 
     </div> 
     <div id="ThirdRow"> 
      <button id="Four" type="button" value="4" class="Show">4</button> 
      <button id="Five" type="button" value="5" class="Show">5</button> 
      <button id="six" type="button" value="6" class="Show">6</button> 
      <button id="Mul" type="button" value="*" class="operators operand">*</button> 
     </div> 
     <div id="FourthRow"> 
      <button id="Seven" type="button" value="7" class="Show">7</button> 
      <button id="Eight" type="button" value="8" class="Show">8</button> 
      <button id="Nine" type="button" value="9" class="Show">9</button> 
      <button id="Divide" type="button" value="/" class="operators operand">/</button> 
     </div> 
     <div id="FifthRow"> 
      <button id="Zero" type="button" value="0" class="Show">0</button> 
      <button id="Dot" type="button" value="." class="Show">.</button> 
      <button id="Calculate" type="button" value="=" class="operand">=</button> 
     </div> 
    </div> 
</div> 

JQuery的：

$("document").ready(function() { 
    var key = null; 

    $(".clean").click(function() { 
     $('input').text(""); 
    }); 

    $(".Show").click(function() { 
     var EText = $('#Result').val(); 
     if (EText != "0") { 
      var val1 = EText; 
      var ButtonVal = $(this); 
      var val2 = ButtonVal.text(); 
      var Res = val1 + val2; 
      $('#Result').val(Res); 
     } else { 
      $('#Result').val() 
     } 
    }); 

    $(function() { 
     var interRes = null; 
     var operator; 
     $('.operators').click(function() { 
      var value1 = $('#Result').val(); 
      if (interRes != null) { 
       var result = ApplyOperation(interRes, value1, operator); 
       interRes = result; 
      } else { 
       interRes = value1; 
      } 
      operator = $(this).text(); 
      $('input').val(""); 
     }); 

     $('#Calculate').click(function() { 
      var op = operator; 
      var res; 
      var value2 = $('#Result').val(); 
      if (value2 != "") { 
       res = ApplyOperation(interRes, value2, op); 
      } else { 
       res = interRes; 
      } 
      $('#Result').val(res); 
      interRes = null; 
     }); 
    }); 

    function ApplyOperation(value1, value2, operator) { 
     var res; 
     switch (operator) { 
      case "+": 
       res = addition(value1, value2); 
       break; 
      case "-": 
       res = subtraction(value1, value2); 
       break; 
      case "*": 
       res = multiplication(value1, value2); 
       break; 
      case "/": 
       res = division(value1, value2); 
       break; 
     } 
     return res; 
    } 

    function addition(first, second) { 
     var a = parseFloat(first); 
     var b = parseFloat(second); 
     var total = a + b; 
     return total; 
    } 

    function subtraction(first, second) { 
     var a = parseFloat(first); 
     var b = parseFloat(second); 
     var sub = a - b; 
     return sub; 
    } 

    function multiplication(first, second) { 
     var a = parseFloat(first); 
     var b = parseFloat(second); 
     var product = a * b; 
     return product; 
    } 

    function division(first, second) { 
     var a = parseFloat(first); 
     var b = parseFloat(second); 
     var divi = a/b; 
     return divi; 
    } 
}); 

Answer 1

看看这个JSFiddle DEMO，我已经有了一些变化更新你的代码。现在它的键盘和点击按钮的工作正常。

$('#Result').keypress(function (e) { 
     if ((e.keyCode == 61)) { 
      var op = operator; 
      var res; 
      var value2 = $('#Result').val(); 
      if ((value2 != "")) { 
       var data = value2.split("+"); 
       if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op); 
       else res = ApplyOperation(interRes, data[1], op); 
      } else { 
       res = interRes; 
      } 
      $('#Result').val(res); 
      interRes = null; 
     } else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) { 
      var value1 = $('#Result').val(); 
      var inter = (interRes != null); 
      if (inter) { 
       var op = operator; 
       var data = value1.split("+"); 
       if (data.length > 2) { 
        operator = String.fromCharCode(e.keyCode); 
        result = ApplyOperation(interRes, data[data.length - 1], op); 
        interRes = result; 
       } else { 
        operator = String.fromCharCode(e.keyCode); 
        result = ApplyOperation(interRes, data[1], op); 
        interRes = result; 
       } 
      } else { 
       interRes = value1; 
      } 
      operator = String.fromCharCode(e.keyCode); 
      $('.input').text(""); 
     } 
    }); 

我希望这会对您有所帮助。