基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）
之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦
JS代码：
varyunSuan=0;//运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法
varchange=0;//属于运算符后需要清空上一数值
varnum1=0;//运算第一个数据
varnum2=0;//运算第二个数据
varcunChuValue=0;//存储的数值
$(function(){
$(".number").click(function(){//点击数字触发事件
varnum=$(this).attr('name');
varoldValue=$("#jieguo").html();
if(change==1){
oldValue="0";
change=0;
}
varnewValue="";
if(num==-1){
oldValue=parseFloat(oldValue);
newValue=oldValue*-1;
}elseif(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;
}
varvalue=$("#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');
varvalue=$("#jieguo").html();
vardianIndex=value.indexOf(".");
if(dianIndex==value.length){
value=value.substr(0,value.length-1);
}
num1=parseFloat(value);
});
$("#dengYu").click(function(){//点击等于符号触发事件
varvalue=$("#jieguo").html();
vardianIndex=value.indexOf(".");
if(dianIndex==value.length){
value=value.substr(0,value.length-1);
}
num2=parseFloat(value);
varsum=0;
if(yuSuan==1){
sum=num1+num2;
}elseif(yuSuan==2){
sum=num1-num2;
}elseif(yuSuan==3){
sum=num1*num2;
}elseif(yuSuan==4){
sum=num1/num2;
}elseif(yuSuan==0||num1==0||num2==0){
sum=num1+num2;
}
varre=/^[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;
varvalue=$("#jieguo").html();
vardianIndex=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;
varvalue=$("#jieguo").html();
vardianIndex=value.indexOf(".");
if(dianIndex==value.length){
value=value.substr(0,value.length-1);
}
cunChuValue+=parseFloat(value);
});
$("#jiCun").click(function(){//点击积存触发事件
change=1;
varvalue=$("#jieguo").html();
vardianIndex=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();
returnfalse;
}
//"清屏"监听
if(event.keyCode==27||event.keyCode==46
||(event.keyCode==110&&event.shiftKey)){
$("#qingPing").click();
returnfalse;
}
//"存储"监听
if(event.keyCode==112){
$("#cunChu").click();
returnfalse;
}
//"取存"监听
if(event.keyCode==113){
$("#quCun").click();
returnfalse;
}
//"累存"监听
if(event.keyCode==114){
$("#leiCun").click();
returnfalse;
}
//"积存"监听
if(event.keyCode==115){
$("#jiCun").click();
returnfalse;
}
//"清存"监听
if(event.keyCode==117){
$("#qingCun").click();
returnfalse;
}
});
/**
*按键触发运算符value1-'+'2-'-'3-'*'4-'/'
*/
functionkeyDownYuSuan(value){
change=1;
yuSuan=value;
varvalue=$("#jieguo").html();
vardianIndex=value.indexOf(".");
if(dianIndex==value.length){
value=value.substr(0,value.length-1);
}
num1=parseFloat(value);
}
/**
*按键触发数字codeASCLL码
*/
functionkeyDownNum(code){
varnumber=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=".";
}
varnum=number;
varoldValue=$("#jieguo").html();
if(change==1){
oldValue="0";
change=0;
}
varnewValue="";
if(num==-1){
oldValue=parseFloat(oldValue);
newValue=oldValue*-1;
}elseif(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代码：
<%@pagelanguage="java"contentType="text/html;charset=UTF-"
pageEncoding="UTF-"%>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-">
<title>简易计算器</title>
<jsp:includepage="inc/easyui.jsp"></jsp:include>
<styletype="text/css">
button{
font-size:px;
font-weight:bold;
width:px;
}
</style>
<scripttype="text/javascript"src="js.js"></script>
</head>
<body>
<table>
<tr>
<tdcolspan="">
<divid="jieguo"
style="width:px;height:px;font-size:px;text-align:right;font-weight:bold;color:red;"></div>
</td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="cunChu">存储(F)</button></td>
<td>
<buttonid="quCun">取存(F)</button></td>
<td>
<buttonid="tuiGe"> 退 格 </button></td>
<td>
<buttonid="qingPing"> 清 屏 </button></td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="leiCun">累存(F)</button></td>
<td>
<buttonid="jiCun">积存(F)</button></td>
<td>
<buttonid="qingCun">清存(F)</button></td>
<td>
<buttonid="Chuyi"class="yunSuan"name=""> ÷ </button>
</td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="seven"class="number"name=""> </button>
</td>
<td>
<buttonid="eight"class="number"name=""> </button>
</td>
<td>
<buttonid="nine"class="number"name=""> </button>
</td>
<td>
<buttonid="chengYi"class="yunSuan"name=""> × </button>
</td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="four"class="number"name=""> </button>
</td>
<td>
<buttonid="five"class="number"name=""> </button>
</td>
<td>
<buttonid="six"class="number"name=""> </button>
</td>
<td>
<buttonid="jianQu"class="yunSuan"name=""> - </button>
</td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="one"class="number"name=""> </button>
</td>
<td>
<buttonid="two"class="number"name=""> </button>
</td>
<td>
<buttonid="three"class="number"name=""> </button>
</td>
<td>
<buttonid="jiaShang"class="yunSuan"name=""> + </button>
</td>
</tr>
<trstyle="height:px;">
<td>
<buttonid="zero"class="number"name=""> </button>
</td>
<td>
<buttonid="dian"class="number"name="."> . </button>
</td>
<td>
<buttonid="zhengFu"class="number"name="-"> +/- </button>
</td>
<td>
<buttonid="dengYu"> = </button></td>
</tr>
</table>
</body>
</html>
计算器样式布局时借鉴别人的，但是代码均是本人自己写的，由于时间原因没有来得及测试，各位大侠在使用过程中发现有bug欢迎提出，共同学习进步，谢谢。