先使用鼠标点击开始,再使用键盘停止,发现需要摁两次键盘;
先使用键盘开始抽奖,再使用鼠标停止,再使用键盘开始抽奖时需要摁两次键盘;
加两个flag就可以了
我和你遇到了同样的问题
<!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 type="text/css">
*{margin:0;padding:0}
.title{width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
color:#C00;
font-weight:bold}
.btn{width:190px;
height:40px;
margin:0 auto;
}
.btn span{
float:left;
display:block;
width:80px;
height:27px;
background:#039;
text-align:center;
line-height:27px;
margin:7px;
color:#FFF;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;
border-radius:6px;
}
</style>
<script>
var data=['iPhone6','谢谢惠顾','1000元购物卡','谢谢惠顾','佳能单反','联想笔记本','谢谢惠顾','50元话费卡','苹果耳机','谢谢惠顾']
timer=null;
flag=0
window.onload=function(){
var play=document.getElementById('play');
var over=document.getElementById('over');
play.onclick=playfun
over.onclick=overfun
document.onkeyup=function(event){
event=event||window.event;
if(event.keyCode==13)
{
if(flag==0){
playfun();
flag=1;
}
else{
overfun();
flag=0;
}
}
}
}
function playfun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length)
title.innerHTML=data[random];
},20)
play.style.background='#999'
flag=1;
}
function overfun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#039'
flag=0;
}
</script>
</head>
<body>
<div id="title" class="title">开始抽奖啦!</div>
<div class="btn"
>
<span id="play">开始</span>
<span id="over">结束</span>
</div>
</body>
</html>
把代码贴出来吧这样不好发现错误。