其实这里面还是有个小BUG的。 我们在触发onclick事件时，会执行playFun函数。 但是，如果我们想用键盘事件来关闭的话会出现问题。 这样用户体验并不好。
4 回答
<!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>
举报
0/150
提交
取消
