键盘事件主要有三个,分别是keydown事件,keyup事件,keyPress事件.
keyDown事件：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keyPress事件：当用户按下键盘上的“字符”键时触发，而且如果按住不放的话，会重复触发此事件。
keyUp事件：当用户释放键盘上的键时触发。
下面就一个案例来讲解一下
html文件
<!DOCTYPE html> <html> <head> <title>键盘事件</title> <link href="jianpan.css" type="text/css" rel="stylesheet"/> <script src="jianpan.js" type="text/javascript"></script> </head> <body> <div id="title">开始抽奖啦！</div> <div id="main"> <span id="play">开始</span> <span id="stop">结束</span> </body> </html>
css事件
#title{ width:400px; height:40px; color:red; text-align:center; padding-top:10px; font-size:20px; font-weight:bold; margin:0 auto; } #main{ width:200px; height:34px; margin:0 auto; padding-top:10px; } #main span{ width:80px; height:30px; text-align:center; line-height:30px; float:left; display:block; margin:10px 8px; border:1px solid #ccddee; color:#FFF; background-color:#036; cursor:pointer;//这个是设置鼠标形状的，此时鼠标放到上面呈现一个小手。 border-radius:10px;//这个是设置矩形的角使其变得圆滑一点，也就是给矩形加个弧度角
font-family:"微软雅黑"; }
js文件
var els=["iphone","Ipad","三星手机","现金五百","谢谢惠顾","三亚五日游","会员","再来一次"], timer,index=0;//这几个变量要设置成全局变量 window.onload=function(){ var play=document.getElementById("play"); var stop=document.getElementById("stop"); //鼠标事件 play.onclick=playFun; stop.onclick=stopFun; //键盘事件 document.onkeyup=StartEvent; } function playFun(){ var title=document.getElementById("title"); var play=document.getElementById("play"); clearInterval(timer);//在设置定时器时要先将原来的定时器删除掉，不然几个定时器同时操作会是个bug timer=setInterval(function(){ var random=Math.floor(Math.random()*8);//Math.floor是取下限。 title.innerHTML=els[random]; },50), play.style.background="#999"; } function stopFun(){ clearInterval(timer); var play=document.getElementById("play"); play.style.backgroundColor="#036"; } function StartEvent(event){ var event=event||window.event; if(event.keyCode==13){//我们可以通过键盘事件的event.keyCode来获得我们按下键盘上按键对应的ASCII值。enter键对应的是13. if(index==0){ playFun(); index=1; }else if(index==1){ stopFun(); index=0; } } }
总结一下：
1.我们给矩形角设置弧度是可以通过border-radius:#px来设置
2.如果我们想设置鼠标移到某元素上的形状时，可以通过cursor：参数；来设置
3.我们在上面设置数组，定时器时要设置成全局变量
4.我们在设置定时器之前要清楚定时器，因为如果我们反复点击元素时会产生多个定时器，那么几个定时器同时运作，会产生bug，所以，我们在产生一个定时器之前必须删除原来的定时器。
5.我们可以通过键盘事件对象的keyCode来获得我们按下的键的ASCII值
效果图如下
按下开始后