之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦
JS代码：
var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法var change = 0;// 属于运算符后需要清空上一数值var num1 = 0;// 运算第一个数据var num2 = 0;// 运算第二个数据var cunChuValue = 0;// 存储的数值$(function() { $(".number").click(function() {// 点击数字触发事件 var num = $(this).attr('name'); var oldValue = $("#jieguo").html(); if (change == 1) { oldValue = "0"; change = 0; } var newValue = ""; if (num == -1) { oldValue = parseFloat(oldValue); newValue = oldValue * -1; } else if (num == ".") { if (oldValue.indexOf('.') == -1) newValue = oldValue + "."; else newValue = oldValue; } else { if (oldValue == 0 && oldValue.indexOf('.') == -1) { newValue = num; } else { newValue = oldValue + num; } } $("#jieguo").html(newValue); }); $("#qingPing").click(function() {// 点击清屏触发事件 $("#jieguo").html("0"); yunSuan = 0; change = 0; num1 = 0; num2 = 0; }); $("#tuiGe").click(function() {// 点击退格触发事件 if (change == 1) { yunSuan = 0; change = 0; } var value = $("#jieguo").html(); if (value.length == 1) { $("#jieguo").html("0"); } else { value = value.substr(0, value.length - 1); $("#jieguo").html(value); } }); $(".yunSuan").click(function() {// 点击运算符号触发事件 change = 1; yuSuan = $(this).attr('name'); var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num1 = parseFloat(value); }); $("#dengYu").click(function() {// 点击等于符号触发事件 var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num2 = parseFloat(value); var sum = 0; if (yuSuan == 1) { sum = num1 + num2; } else if (yuSuan == 2) { sum = num1 - num2; } else if (yuSuan == 3) { sum = num1 * num2; } else if (yuSuan == 4) { sum = num1 / num2; } else if (yuSuan == 0 || num1 == 0 || num2 == 0) { sum = num1 + num2; } var re = /^[0-9]+.?[0-9]*$/; if (re.test(sum)) { sum = sum.toFixed(2); } $("#jieguo").html(sum); change = 1; yuSuan = 0; num1 = 0; num2 = 0; }); $("#cunChu").click(function() {// 点击存储触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } cunChuValue = parseFloat(value); }); $("#quCun").click(function() {// 点击取存触发事件 change = 1; $("#jieguo").html(cunChuValue); }); $("#qingCun").click(function() {// 点击清存触发事件 change = 1; cunChuValue = 0; }); $("#leiCun").click(function() {// 点击累存触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } cunChuValue += parseFloat(value); }); $("#jiCun").click(function() {// 点击积存触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } if (cunChuValue == 0) { cunChuValue = parseFloat(value); } else { cunChuValue = cunChuValue * parseFloat(value); } });});// 按键监听$(document) .keydown( function(event) { // 数字监听 if (((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || (event.keyCode == 190 || event.keyCode == 110)) && !event.shiftKey) { keyDownNum(event.keyCode); } // "+"监听 if ((event.keyCode == 187 && event.shiftKey) || event.keyCode == 107) { keyDownYuSuan(1); } // "-"监听 if ((event.keyCode == 189 && event.shiftKey) || event.keyCode == 109) { keyDownYuSuan(2); } // "*"监听 if ((event.keyCode == 56 && event.shiftKey) || event.keyCode == 106) { keyDownYuSuan(3); } // "/"监听 if (event.keyCode == 191 || event.keyCode == 111) { keyDownYuSuan(4); } // "="监听 if ((event.keyCode == 187 && !event.shiftKey) || event.keyCode == 13) { $("#dengYu").click(); } // "回退"监听 if (event.keyCode == 8) { $("#tuiGe").click(); return false; } // "清屏"监听 if (event.keyCode == 27 || event.keyCode == 46 || (event.keyCode == 110 && event.shiftKey)) { $("#qingPing").click(); return false; } // "存储"监听 if (event.keyCode == 112) { $("#cunChu").click(); return false; } // "取存"监听 if (event.keyCode == 113) { $("#quCun").click(); return false; } // "累存"监听 if (event.keyCode == 114) { $("#leiCun").click(); return false; } // "积存"监听 if (event.keyCode == 115) { $("#jiCun").click(); return false; } // "清存"监听 if (event.keyCode == 117) { $("#qingCun").click(); return false; } });/** * 按键触发运算符 value 1-'+' 2-'-' 3-'*' 4-'/' */function keyDownYuSuan(value) { change = 1; yuSuan = value; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num1 = parseFloat(value);}/** * 按键触发数字 code ASCLL码 */function keyDownNum(code) { var number = 0; if (code == 48 || code == 96) {// "0"监听 number = 0; } if (code == 49 || code == 97) {// "1"监听 number = 1; } if (code == 50 || code == 98) {// "2"监听 number = 2; } if (code == 51 || code == 99) {// "3"监听 number = 3; } if (code == 52 || code == 100) {// "4"监听 number = 4; } if (code == 53 || code == 101) {// "5"监听 number = 5; } if (code == 54 || code == 102) {// "6"监听 number = 6; } if (code == 55 || code == 103) {// "7"监听 number = 7; } if (code == 56 || code == 104) {// "8"监听 number = 8; } if (code == 57 || code == 105) {// "9"监听 number = 9; } if (code == 190 || code == 110) {// "."监听 number = "."; } var num = number; var oldValue = $("#jieguo").html(); if (change == 1) { oldValue = "0"; change = 0; } var newValue = ""; if (num == -1) { oldValue = parseFloat(oldValue); newValue = oldValue * -1; } else if (num == ".") { if (oldValue.indexOf('.') == -1) newValue = oldValue + "."; else newValue = oldValue; } else { if (oldValue == 0 && oldValue.indexOf('.') == -1) { newValue = num; } else { newValue = oldValue + num; } } $("#jieguo").html(newValue);}
HTML/CSS代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset=" utf-8"> 7 <title>简易计算器</title> 8 <jsp:include page="inc/easyui.jsp"></jsp:include> 9 <style type="text/css"> 10 button { 11 font-size: 18px; 12 font-weight: bold; 13 width: 90px; 14 } 15 </style> 16 <script type="text/javascript" src="js.js"></script> 17 </head> 18 <body> 19 <table> 20 <tr> 21 <td colspan="4"> 22 <div id="jieguo" 23 style="width: 370px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0</div> 24 </td> 25 </tr> 26 <tr style="height: 40px;"> 27 <td> 28 <button id="cunChu">存储(F1)</button></td> 29 <td> 30 <button id="quCun">取存(F2)</button></td> 31 <td> 32 <button id="tuiGe"> 退 格 </button></td> 33 <td> 34 <button id="qingPing"> 清 屏 </button></td> 35 </tr> 36 <tr style="height: 40px;"> 37 <td> 38 <button id="leiCun">累存(F3)</button></td> 39 <td> 40 <button id="jiCun">积存(F4)</button></td> 41 <td> 42 <button id="qingCun">清存(F6)</button></td> 43 <td> 44 <button id="Chuyi" class="yunSuan" name="4"> ÷ </button> 45 </td> 46 </tr> 47 <tr style="height: 40px;"> 48 <td> 49 <button id="seven" class="number" name="7"> 7 </button> 50 </td> 51 <td> 52 <button id="eight" class="number" name="8"> 8 </button> 53 </td> 54 <td> 55 <button id="nine" class="number" name="9"> 9 </button> 56 </td> 57 <td> 58 <button id="chengYi" class="yunSuan" name="3"> × </button> 59 </td> 60 </tr> 61 <tr style="height: 40px;"> 62 <td> 63 <button id="four" class="number" name="4"> 4 </button> 64 </td> 65 <td> 66 <button id="five" class="number" name="5"> 5 </button> 67 </td> 68 <td> 69 <button id="six" class="number" name="6"> 6 </button> 70 </td> 71 <td> 72 <button id="jianQu" class="yunSuan" name="2"> - </button> 73 </td> 74 </tr> 75 <tr style="height: 40px;"> 76 <td> 77 <button id="one" class="number" name="1"> 1 </button> 78 </td> 79 <td> 80 <button id="two" class="number" name="2"> 2 </button> 81 </td> 82 <td> 83 <button id="three" class="number" name="3"> 3 </button> 84 </td> 85 <td> 86 <button id="jiaShang" class="yunSuan" name="1"> + </button> 87 </td> 88 </tr> 89 <tr style="height: 40px;"> 90 <td> 91 <button id="zero" class="number" name="0"> 0 </button> 92 </td> 93 <td> 94 <button id="dian" class="number" name="."> . </button> 95 </td> 96 <td> 97 <button id="zhengFu" class="number" name="-1"> +/- </button> 98 </td> 99 <td>100 <button id="dengYu"> = </button></td>101 </tr>102 </table>103 </body>104 </html>
计算器样式布局有所借鉴，代码均为原创，未经授权禁止转载；内容未经过严格测试，如遇BUG欢迎提出，谢谢！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
