js中常用的键盘事件

一、三个常用的键盘事件

1、keydown: 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
2、keypress: 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
3、keyup: 当用户释放键盘上的键时触发。
这里我们简单的举一个抽奖的例子：

html代码
<div id="show">抽奖内容展示</div>
<div id="btns">
      <span id="play">开 始</span>
      <span id="stop">停 止</span>
</div>

show部分用于展示抽奖的结果，play是开始按钮，stop是停止按钮，我们实现抽奖可以使用鼠标的点击事件，也可以使用键盘事件，这里我们使用键盘事件，你也可以用鼠标事件。

     *{
        margin: 0;
        padding: 0;
        }
        #show{
        width:400px;
        height:60px;
        margin: 0 auto;
        font-size: 18px;
        color: red;
        padding-top: 20px;
        text-align: center;

        }
        #btns{
        width:240px;
        height:40px;
        margin: 0 auto;
        text-align: center;
        }
        #btns span{
        width:80px;
        height: 26px;
        line-height: 26px;
        color: #FFFFFF;
        background: #228B22;
        border-radius: 7px;
        float: left;
        margin-left:20px;
        margin-right: 20px;
        font-size: 14px;
        text-align: center;

        }

这里是样式文件。

js代码
 <script>
          var data=["书","小哇","笔","谢谢惠顾","ipad","笔记本"];
          var timer=null;
          //flag是用来记录按下enter是开始抽奖还是停止抽奖
          var flag=0;
          var show=document.getElementById('show');
          var play=document.getElementById('play');
          var stop=document.getElementById('stop');
          //这里我们使用keyup事件
          document.onkeyup= function(event){
            console.log(event.keyCode);
            if(event.keyCode==13){
              if(flag==0){
                playfun();
                flag=1;
              }else{
                stopfun();
                flag=0;
              }
            }
      }
       function playfun(){
        //random()生成（0,1]之内的数，可以取到0但是不会到1.
        //每次生成一个计时器之前需要提前清除已经存在的计时器，否则会越来越快。
            clearInterval(timer);
            timer=setInterval(function(){
                var rand=Math.floor(Math.random()*data.length);
                show.innerHTML=data[rand];

            },50);
            play.style.background="#888888";
        }

        function stopfun(){
            clearInterval(timer);
            play.style.background="#228B22";
        }
        </script>

这个js使用计时器和键盘事件实现一个简单的抽奖，抽奖的内容我们保存在数组中。