之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦

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代码：

<%@ page language="java" contentType="text/html; charset=UTF-" pageEncoding="UTF-"%> <!DOCTYPE html> <html> <head> <meta charset=" utf-"> <title>简易计算器</title> <jsp:include page="inc/easyui.jsp"></jsp:include> <style type="text/css"> button { font-size: px; font-weight: bold; width: px; } </style> <script type="text/javascript" src="js.js"></script> </head> <body> <table> <tr> <td colspan=""> <div id="jieguo" ></div> </td> </tr> <tr> <td> <button id="cunChu">存储(F)</button></td> <td> <button id="quCun">取存(F)</button></td> <td> <button id="tuiGe">退格</button></td> <td> <button id="qingPing">清屏</button></td> </tr> <tr> <td> <button id="leiCun">累存(F)</button></td> <td> <button id="jiCun">积存(F)</button></td> <td> <button id="qingCun">清存(F)</button></td> <td> <button id="Chuyi" name="">÷</button> </td> </tr> <tr> <td> <button id="seven" name=""></button> </td> <td> <button id="eight" name=""></button> </td> <td> <button id="nine" name=""></button> </td> <td> <button id="chengYi" name="">×</button> </td> </tr> <tr> <td> <button id="four" name=""></button> </td> <td> <button id="five" name=""></button> </td> <td> <button id="six" name=""></button> </td> <td> <button id="jianQu" name="">-</button> </td> </tr> <tr> <td> <button id="one" name=""></button> </td> <td> <button id="two" name=""></button> </td> <td> <button id="three" name=""></button> </td> <td> <button id="jiaShang" name="">+</button> </td> </tr> <tr> <td> <button id="zero" name=""></button> </td> <td> <button id="dian" name=".">.</button> </td> <td> <button id="zhengFu" name="-">+/-</button> </td> <td> <button id="dengYu">=</button></td> </tr> </table> </body> </html>

计算器样式布局时借鉴别人的，但是代码均是本人自己写的，由于时间原因没有来得及测试，各位大侠在使用过程中发现有bug欢迎提出，共同学习进步，谢谢。