这个效果鼠标和键盘怎么才能搭配使用呢？

源自：4-5 [DOM事件] 抽奖系统（下）

这个效果鼠标和键盘怎么才能搭配使用呢？

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>键盘事件-按回车实现开始停止</title>
   <style>
   body,input{margin:0;padding:0;font-size:14px;font-family:"微软雅黑";}
   #text{color:red;font:bold 32px/38px "微软雅黑";width:500px;height:38px;text-align:center;margin:30px auto;}
   #box input{width:80px;font:16px/26px "微软雅黑";background:#036;color:#fff;float:left;margin-right:10px;border:none;border-radius:8px;text-align:center;cursor:pointer;}
   #box{height:26px;width:180px;margin:0 auto;}
   </style>
   <script>
       window.onload=function ()
       {
           var oText=document.getElementById('text');
           var oStart=document.getElementById('start');
           var oStop=document.getElementById('stop');
           var timer=null;
           var aText=['IPhone5s','IPad','三星笔记本','惠普打印机','吉列剃须刀','谢谢参与','50元电话卡','1000元超市购物卡'];
           var onOff=true;
           oStart.onclick=function ()
           {

               clearInterval(timer);
               timer=setInterval(getRandom,50);
               this.style.background='#999';
           }
           oStop.onclick=function (){
               clearInterval(timer);
               oStart.style.background='';
           }


           document.onkeyup=function (ev)
           {
               var ev=ev||event;
               //alert(ev.keyCode) //回车是13
               if(ev.keyCode==13)
               {
                   if(onOff)
                   {
                       clearInterval(timer);
                       timer=setInterval(getRandom,50);
                       oStart.style.background='#ccc';
                   }
                   else
                   {
                       clearInterval(timer);
                       oStart.style.background='';
                   }
                   onOff=!onOff;
               }
           }
           function getRandom()
           {
               var num=aText.length-1;
               oText.innerHTML=aText[Math.round(Math.random()*num)];
           }
       }
   </script>
</head>
<body>
   <div id="text">开始抽奖啦！</div>
   <div id="box">
       <input type="button" value="开始" id="start">
       <input type="button" value="停止" id="stop">
   </div>
</body>
</html>

提问者：阿伊舍999 2016-03-12 12:01

个回答

Lionis: 2016-03-12 15:38:42

你应该用的是IE浏览器吧，我用chrome是可以的。

document.onkeyup=function (ev) {    
    var ev = ev || window.event;    //这里的话是为了兼容IE，得用window.event
                
    if(ev.keyCode==13) {
        if(onOff) {
            clearInterval(timer);
            timer=setInterval(getRandom,50);
            oStart.style.background = '#ccc';
        } else {
            clearInterval(timer);
            oStart.style.background = '';    
        }
        onOff = !onOff;
     }
}

还有，如果鼠标点击了 “开始”，然后键盘按回车，就会出现BUG，没有马上停止，因为你在鼠标点击事件中也没有设置 onOff 值。

oStart.onclick=function() {
    clearInterval(timer);
    timer=setInterval(getRandom,50);
    this.style.background='#999';
    onOff = false;
}
oStop.onclick=function() {
    clearInterval(timer);
    oStart.style.background='';
    onOff = true;
}

小小马_0

2016-03-12 14:37:31
1. 在 oStart.onclick=function () 函数中添加： onOff = false;
2. 在oStop.onclick=function () 函数中添加： onOff = true;
0