javascript定时器无法停止
最近在学习javascript的定时器，就想着做一个数字抽奖的实例，效果是实现了，但现在出现了一个小bug，就是当定时器开始后如果按了键盘上的空格或是回车键再点停止就停不...
最近在学习javascript的定时器，就想着做一个数字抽奖的实例，效果是实现了，但现在出现了一个小bug，就是当定时器开始后如果按了键盘上的空格或是回车键再点停止就停不下来，我把代码贴上来，求大神指点下是哪里出了问题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>数字抽奖实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
body{
background:#000;
}
#abc{
color:#f00;
text-align:center;
margin-top:500px;
}
</style>
</head>
<body>
<div id='abc'>
<button id="oBtn1">开始</button>
<img src="images/0.png"/>
<img src="images/0.png"/>
<img src="images/0.png"/>
<button id="oBtn2">停止</button>
</div>
<script>
var oBtn1=document.getElementById('oBtn1')
var oBtn2=document.getElementById("oBtn2")
var time=null
oBtn1.onclick=function(){
time=setInterval(
function cj(){
function num(oNum){
var oNum=Math.floor(Math.random()*(1000+1));
if(oNum<10){
return "0"+"0"+oNum
}
else if(oNum<100){
return "0"+oNum
}
else{
return ''+oNum;
}
}
var aNum=String(num())
var oImg=document.getElementById('abc')
var aImg=oImg.getElementsByTagName('img')
for(i=0;i<aImg.length;i++){
aImg[i].src='images/'+aNum[i]+'.png'
}
}
,10);
}
oBtn2.onclick=function (){
clearInterval(time)
}
</script>
</body>
</html> 展开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>数字抽奖实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
body{
background:#000;
}
#abc{
color:#f00;
text-align:center;
margin-top:500px;
}
</style>
</head>
<body>
<div id='abc'>
<button id="oBtn1">开始</button>
<img src="images/0.png"/>
<img src="images/0.png"/>
<img src="images/0.png"/>
<button id="oBtn2">停止</button>
</div>
<script>
var oBtn1=document.getElementById('oBtn1')
var oBtn2=document.getElementById("oBtn2")
var time=null
oBtn1.onclick=function(){
time=setInterval(
function cj(){
function num(oNum){
var oNum=Math.floor(Math.random()*(1000+1));
if(oNum<10){
return "0"+"0"+oNum
}
else if(oNum<100){
return "0"+oNum
}
else{
return ''+oNum;
}
}
var aNum=String(num())
var oImg=document.getElementById('abc')
var aImg=oImg.getElementsByTagName('img')
for(i=0;i<aImg.length;i++){
aImg[i].src='images/'+aNum[i]+'.png'
}
}
,10);
}
oBtn2.onclick=function (){
clearInterval(time)
}
</script>
</body>
</html> 展开
1个回答
展开全部
错误出现在，你没有对 ”重复“ 的点击做处理
代码应该改成这样：
var oBtn1=document.getElementById('oBtn1')
var oBtn2=document.getElementById("oBtn2")
var time=null;
oBtn1.onclick=function(){
clearInterval(time); // 这里先清除一下“可能存在”的定时器
time=setInterval(
function cj(){
function num(oNum){
var oNum=Math.floor(Math.random()*(1000+1));
if(oNum<10){
return "0"+"0"+oNum
}
else if(oNum<100){
return "0"+oNum
}
else{
return ''+oNum;
}
}
var aNum=String(num())
var oImg=document.getElementById('abc')
var aImg=oImg.getElementsByTagName('img')
for(i=0;i<aImg.length;i++){
aImg[i].src='images/'+aNum[i]+'.png'
}
}
,10);
}
oBtn2.onclick=function (){
clearInterval(time)
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
