Javascript:将键盘输入添加到计算器

Question

昨天开始了一个小项目来制作计算器.我认为它完全正常工作但我想更进一步添加键盘输入(就像你可以在出厂默认的OS计算器上)

我在这里找到了答案,但它是针对C#的.

所以:

如何在JavaScript中添加键盘输入？这将包括0-9,所有运算符,"C"清除和"删除"/"esc"以删除最后一个条目.

理想情况下,我想要
点击键时我发生的css悬停效果(更暗的阴影).

你可以在这里查看开头:http: //codepen.io/kreitzo/pen/RapEqp

的index.html

<div id="calculator">
  <div id="screen">
    <div id="calc">0</div>
    <div id="result">0</div>
  </div>
  <button class="value">1</button><button class="value">2</button><button class="value">3</button><button class="value">+</button><button class="value">4</button><button class="value">5</button><button class="value">6</button><button class="value">-</button><button class="value">7</button><button class="value">8</button><button class="value">9</button><button class="value">*</button><button class="value">.</button><button class="value">0</button><button class="CE">   &larr;</button><button class="value">/</button><button class="equals">=</button><button class="C">C</button>

</div>

的script.js

$(document).ready(function() {

  var string = "";

  /* Calculator input string */
  $(".value").click(function() {
    string += $(this).text();
    $("#calc").text(string);
  });

  /* Clear all */
  $(".C").click(function() {
    string = "";
    $("#calc, #result").text("0");
  });
  /* Clear last entry */
  $(".CE").click(function() {
    string = string.slice(0, string.length - 1);
    $("#calc").text(string);
  });

  /* Show result */
  $(".equals").click(function() {
    $("#result").text(eval(string));
  });

});

Answer 1

以下是codePen示例中的按键功能示例:

http://codepen.io/anon/pen/WwjNao

   document.onkeypress = function (e) {
        keyPressed = String.fromCharCode(e.which);        
        if($("#calc").length > 0){
          $("#calc").append(keyPressed);
        }else{
          $("#calc").text(keyPressed);
        }
    };

这是一个提示,我不会给你所有的代码;)