                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

這個效果鼠標和鍵盤怎么才能搭配使用呢？

<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>鍵盤事件-按回車實現(xiàn)開始停止</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

源自：DOM事件探秘 4-5

關注問題我要回答

620

操作

收起

2 回答

Lionis
2016-03-12

你應該用的是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;
?????}
}

還有，如果鼠標點擊了 “開始”，然后鍵盤按回車，就會出現(xiàn)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;
}