admin管理员组文章数量:1391964
I am making a speed dating timer that counts down from 3 minutes to 0, shows a "move on to next date" message, and then repeats.
I have been able to get the timer to count down to 0, and then restart after the interval I've set, but for some reason it will not display the message. My code is as follows
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
var el = document.getElementById(element);
// if the time is 0 then end the counter
if(time == 0) {
el.innerHTML = "Move on to next date...";
clearInterval(interval);
setTimeout(function() {
countdown('clock', 3, 0);
}, 2000);
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = "0" + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ':' + seconds;
el.innerHTML = text;
time--;
}, 1000);
}
countdown('clock', 3, 0);
I am making a speed dating timer that counts down from 3 minutes to 0, shows a "move on to next date" message, and then repeats.
I have been able to get the timer to count down to 0, and then restart after the interval I've set, but for some reason it will not display the message. My code is as follows
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
var el = document.getElementById(element);
// if the time is 0 then end the counter
if(time == 0) {
el.innerHTML = "Move on to next date...";
clearInterval(interval);
setTimeout(function() {
countdown('clock', 3, 0);
}, 2000);
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = "0" + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ':' + seconds;
el.innerHTML = text;
time--;
}, 1000);
}
countdown('clock', 3, 0);
-
Did you try to debug this? What does
console.log(el)give you? – matewka Commented Nov 27, 2013 at 10:21
4 Answers
Reset to default 3just try this code i have fixed it for you
<html>
<head>
<Script>
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
var el = document.getElementById('element');
// if the time is 0 then end the counter
if(time == 0) {
setTimeout(function() {
el.innerHTML = "Move on to next date...";
}, 10);
clearInterval(interval);
setTimeout(function() {
countdown('clock', 0, 5);
}, 2000);
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = "0" + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ':' + seconds;
el.innerHTML = text;
time--;
}, 1000);
}
countdown('clock', 0, 5);
</script>
</head>
<body>
<p id="element">elelelelel</p>
</body>
</html>
You're falling through into the "set the time" part again after the 'set the text' part. It is updating the text, but then overwriting it with "00:00".
You should insert a return statement to stop it continuing, or wrap the clock part in an else block.
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
var el = document.getElementById(element);
// if the time is 0 then end the counter
if (time <= 0) {
var text = "hello";
el.innerHTML = text;
setTimeout(function() {
countdown('clock', 0, 5);
}, 2000);
clearInterval(interval);
return;
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = "0" + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ':' + seconds;
el.innerHTML = text;
time--;
}, 1000);
}
countdown('clock', 0, 5);
See fiddle: http://jsfiddle/aTDJY/
I got this to work by changing
innerHTML to innerText
In my example the clock is just a div. If you are using textbox you need to use to use value.
Here's my plete solution.
<html>
<head>
<script type="text/javascript">
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
var el = document.getElementById(element);
// if the time is 0 then end the counter
if(time == 0) {
el.innerText = "Move on to next date...";
clearInterval(interval);
setTimeout(function() {
countdown('clock', 3, 0);
}, 10);
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = "0" + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ':' + seconds;
el.innerText = text;
time--;
}, 10);
}
countdown('clock', 3, 0);
</script>
</head>
<body>
<h1>Clock</h1>
<div id="clock"/>
</body>
</html>
I will do it like this instead
$(document).ready(function(){
setInterval(UpdateTime(), 1000);
});
var interval = 3*60; // 3 minutes
function updateTime(){
interval --;
if(interval == 0)
{
$(element).val("Move on to next date...");
var interval = 3*60;
}
else
{
$(element).html(interval + " seconds left");
}
}
本文标签：
版权声明：本文标题：setinterval - Javascript 3 minute timer that repeats when complete and shows message at the end of each cycle - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744710315a2621092.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论