javascript 点击按钮可重复倒计时问题 10
我的代码目的是可以重复倒计时。从10秒到0秒,当到0秒时,弹出窗口显示时间到。每次我点time时,可以重复倒计时,但之前的倒计时为什么还在继续,为什么我使用监听事件没生效...
我的代码目的是可以重复倒计时。从10秒到0秒,当到0秒时,弹出窗口显示时间到。每次我点time时,可以重复倒计时,但之前的倒计时为什么还在继续,为什么我使用监听事件没生效,请问下各位大神,怎么修改。本人刚才Javacript 几天。求指导。。。。
<!DOCTYPE html>
<html>
<Script language="JavaScript" >
var t = 10;
var tt;
function timef(){
for(tt=t;tt>=0;tt--){
window.time1=window.setTimeout("Update(" + tt + ")", (t-tt) * 1000);
}
}
function Update(num){
document.getElementById("time").innerHTML = num + "s";
if(num==0){
alert("time expires");
}
if(num!=0){
var d=document.getElementById("time1");
d.addEventListener("click", stopf);
}
}
function stopf(){
window.clearTimeout(window.time1);
t = 10;
}
</script>
<body>
Remaining Time:
<span id="time" type="text" size="1">10s</span><br>
<button id="time1" onclick="timef();"> time</button>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<Script language="JavaScript" >
var t = 10;
var tt;
function timef(){
for(tt=t;tt>=0;tt--){
window.time1=window.setTimeout("Update(" + tt + ")", (t-tt) * 1000);
}
}
function Update(num){
document.getElementById("time").innerHTML = num + "s";
if(num==0){
alert("time expires");
}
if(num!=0){
var d=document.getElementById("time1");
d.addEventListener("click", stopf);
}
}
function stopf(){
window.clearTimeout(window.time1);
t = 10;
}
</script>
<body>
Remaining Time:
<span id="time" type="text" size="1">10s</span><br>
<button id="time1" onclick="timef();"> time</button>
</body>
</html> 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>test</title>
<style type="text/css">
</style>
<script type="text/javascript">
var timer = null, SLEEP = 1000;
var timef = function ()
{
var time = document.getElementById ('time');
var s = parseInt (time.firstChild.nodeValue);
time.firstChild.nodeValue = s - 1 + 's';
if (s == 1)
{
alert ('time expires');
time.firstChild.nodeValue = '10s';
clearTimeout (timer);
return;
}
timer = setTimeout (timef, SLEEP);
}
</script>
</head>
<body>
Remaining Time:
<span id="time">10s</span>
<br / >
<button onclick="timef();">time</button>
</body>
</html>
追问
我的意思是,第二次点time的时候,它会重新倒计时。而你这个代码它不会重新倒计时
追答
不会么,那我不知道了,你自己看着办吧
展开全部
我在我的电脑上调试了一下没有这样的情况,只有你第二次点的时候不会倒计时到0,只要改一下你的settimeout 的时间就行了
我用的firefox调试的,IE上不行~试过了
我用的firefox调试的,IE上不行~试过了
更多追问追答
追问
我写得这个,第二次点击time时,之前执行的命令10到0,它会一直执行下去,而不能停止,我想要的是,当点击time时,随时可以准确的从10到0,但我的代码可以执行,但不能覆盖之前的,
追答
我又试了下,你的监听没问题,问题在于你循环调用了SetTimeout,每一次调用产生的ID值不同个,所以你在监听到的函数里面取消的只是其中一个ID,还有9个ID的timer在运行,所以说,要改的话你不应该循环set,而是应该在你的update里面处理你的t的值,不知道你这样理解了没
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询