課程
/前端開發
/JavaScript
/DOM事件探秘
其實這里面還是有個小BUG的。 我們在觸發onclick事件時，會執行playFun函數。 但是，如果我們想用鍵盤事件來關閉的話會出現問題。 這樣用戶體驗并不好。
2014-07-30
源自：DOM事件探秘 4-5
正在回答
這個問題很好解決，就把flag的值，在playFun和stopFun里面在在重生一下，就行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0; padding:0;}
#title{
width:400px;
height:60px;
margin:0 auto;
padding-top:30px;
font-size:24px;
font-weight:blod;
line-height:60px;
text-align:center;
color:#f00;
}
#btns{
width:204px;
height:30px;
#btns span{
width:80px;
height:28px;
display:block;
background:#036;
float:left;
margin-right:20px; /*注意border的寬度和margin的大小*/
border:1px solid #036;
border-radius:7px;
line-height:28px;
color:#fff;
font-family:"microsoft yahei";
font-size:20px;
cursor:pointer;
</style>
<script>
window.onload = function ()
{
var oTitle = document.getElementById('title');
var oPlay = document.getElementById('play');
var oStop = document.getElementById('stop');
var array = ['iphone6','iWatch','MX4','Canon','iMac','100元充值卡','200元超市購物卡','謝謝參與','蘋果筆記本','智能手環'];
var timer = null;
var flag = 0; //設置一個標志變量
//鼠標點擊事件
oPlay.onclick = startMove; //為什么此處加（）不行
oStop.onclick = stopMove;
//鍵盤事件
document.onkeyup = function (e)
var oEvent = e || event;
if(oEvent.keyCode == 13)
if(flag == 0)
startMove(); //為什么此處非要加（）
flag = 1;
else
stopMove();
flag = 0;
function startMove()
clearInterval(timer);
timer = setInterval(function (){
var rand = Math.floor(Math.random()*array.length);
oTitle.innerHTML = array[rand];
}, 50);
oPlay.style.background = '#999';
function stopMove()
if(flag == 1)
oPlay.style.background = '#036';
flag = 0
</script>
</head>
<body>
<div id="title">
開始抽獎啦！
</div>
<div id="btns">
<span id="play">開始</span>
<span id="stop">停止</span>
</body>
</html>
B10041104
flag的改變應該在funplay和funStop里
確實，如果用鼠標開始，但是想用鍵盤結束的話得按兩次enter才可以。
舉報
DOM事件？本課程會通過實例來給小伙伴們講解如何使用這些事件
2 回答為什么下拉菜單出來后一按上下鍵盤就會自己收回去
2 回答判斷組織默認行為和冒泡
1 回答DOCTYPE聲明問題
2 回答event.js定義函數無法被引用
1 回答random未定義
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2014-10-28
這個問題很好解決，就把flag的值，在playFun和stopFun里面在在重生一下，就行了。
2014-09-10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0; padding:0;}
#title{
width:400px;
height:60px;
margin:0 auto;
padding-top:30px;
font-size:24px;
font-weight:blod;
line-height:60px;
text-align:center;
color:#f00;
}
#btns{
width:204px;
height:30px;
margin:0 auto;
}
#btns span{
width:80px;
height:28px;
display:block;
background:#036;
float:left;
margin-right:20px; /*注意border的寬度和margin的大小*/
border:1px solid #036;
border-radius:7px;
line-height:28px;
text-align:center;
color:#fff;
font-weight:blod;
font-family:"microsoft yahei";
font-size:20px;
cursor:pointer;
}
</style>
<script>
window.onload = function ()
{
var oTitle = document.getElementById('title');
var oPlay = document.getElementById('play');
var oStop = document.getElementById('stop');
var array = ['iphone6','iWatch','MX4','Canon','iMac','100元充值卡','200元超市購物卡','謝謝參與','蘋果筆記本','智能手環'];
var timer = null;
var flag = 0; //設置一個標志變量
//鼠標點擊事件
oPlay.onclick = startMove; //為什么此處加（）不行
oStop.onclick = stopMove;
//鍵盤事件
document.onkeyup = function (e)
{
var oEvent = e || event;
if(oEvent.keyCode == 13)
{
if(flag == 0)
{
startMove(); //為什么此處非要加（）
flag = 1;
}
else
{
stopMove();
flag = 0;
}
}
}
function startMove()
{
if(flag == 0)
{
clearInterval(timer);
timer = setInterval(function (){
var rand = Math.floor(Math.random()*array.length);
oTitle.innerHTML = array[rand];
}, 50);
oPlay.style.background = '#999';
}
flag = 1;
}
function stopMove()
{
if(flag == 1)
{
clearInterval(timer);
oPlay.style.background = '#036';
}
flag = 0
}
}
</script>
</head>
<body>
<div id="title">
開始抽獎啦！
</div>
<div id="btns">
<span id="play">開始</span>
<span id="stop">停止</span>
</div>
</body>
</html>
2014-08-11
flag的改變應該在funplay和funStop里
2014-07-31
確實，如果用鼠標開始，但是想用鍵盤結束的話得按兩次enter才可以。