Javascript:为计算器添加键盘输入

Javascript: Add keyboard input to calculator

本文关键字：键盘 输入 添加 计算器 Javascript      更新时间：2023-09-26

昨天开始了一个制作计算器的小项目。我认为它完全可以工作，但我想更进一步，添加键盘输入（就像你可以在工厂默认的操作系统计算器上一样）

我在这里找到了一个答案，但它是针对C#的。

因此：

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

理想情况下，我希望我所做的css悬停效果（深色）发生
当也点击按键时。

您可以在此处查看开始：http://codepen.io/apswak/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));
  });
});

下面是一个在代码上具有按键功能的示例Pen示例：

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);
        }
    };

这是一个提示，我不会给你所有的代码；）

我在代码笔的副本中为您介绍了一些基本数字

您必须监听按键并将按键（event.wich）与它应该触发的事件相匹配。

$(document).keypress(function(event){
    console.log(event.which);
    //0
    if(event.which == 48){
      string += 0;
      $("#calc").text(string);
    }
});

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

此外，如果你做0123+5，它会说它等于88，所以你可能想把它记为一个bug。

您可以使用按键https://api.jquery.com/keypress/并收听正在按下哪个键。

密钥代码：https://css-tricks.com/snippets/javascript/javascript-keycodes/

$( "#target" ).keypress(function( event ) {
    if ( event.which == 48 ) {
    // Return #0
}
if ( event.which == 49 ) {
    // Return #1
}
// and so on...
});
相关文章：