基於HTML+CSS，jQuery編寫的簡易計算機後續（添加了鍵盤監聽）_jquery

之前發布了一款簡易的計算機，今天做了一下修改，添加了鍵盤監聽事件，不用再用滑鼠點點點啦

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 + ".";elsenewValue = 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 + ".";elsenewValue = 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"style="width: px;height: px;font-size: px;text-align: right;font-weight:bold;color: red;"></div></td></tr><tr style="height: px;"><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 style="height: px;"><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" class="yunSuan" name="">  ÷  </button></td></tr><tr style="height: px;"><td><button id="seven" class="number" name="">    </button></td><td><button id="eight" class="number" name="">    </button></td><td><button id="nine" class="number" name="">    </button></td><td><button id="chengYi" class="yunSuan" name="">  ×  </button></td></tr><tr style="height: px;"><td><button id="four" class="number" name="">    </button></td><td><button id="five" class="number" name="">    </button></td><td><button id="six" class="number" name="">    </button></td><td><button id="jianQu" class="yunSuan" name="">  -  </button></td></tr><tr style="height: px;"><td><button id="one" class="number" name="">    </button></td><td><button id="two" class="number" name="">    </button></td><td><button id="three" class="number" name="">    </button></td><td><button id="jiaShang" class="yunSuan" name="">  +  </button></td></tr><tr style="height: px;"><td><button id="zero" class="number" name="">    </button></td><td><button id="dian" class="number" name=".">  .  </button></td><td><button id="zhengFu" class="number" name="-">  +/-  </button></td><td><button id="dengYu">  =  </button></td></tr></table></body></html> 

計算機樣式布局時借鑒別人的，但是代碼均是本人自己寫的，由於時間原因沒有來得及測試，各位大俠在使用過程中發現有bug歡迎提出，共同學習進步，謝謝。