Just wanted to ask how to create the simplest possible countdown timer.
只是想问一下如何创建最简单的倒计时计时器。
There'll be a sentence on the site saying:
网站上会有一句话说:
"Registration closes in 05:00 minutes!"
“报名在05:00分结束!”
So, what I want to do is to create a simple js countdown timer that goes from "05:00" to "00:00" and then resets to "05:00" once it ends.
所以，我想做的是创建一个简单的js倒计时计时器，从“05:00”到“00:00”，然后在它结束后重新设置为“05:00”。
I was going through some answers before, but they all seem too intense (Date objects, etc.) for what I want to do.
我之前有过一些答案，但是它们看起来都太过强烈(约会对象，等等)，以至于我无法做我想做的事情。
3 个解决方案
#1
322
I have two demos, one with jQuery and one without. Neither use date functions and are about as simple as it gets.
我有两个演示，一个带有jQuery，一个没有。它们都不使用日期函数，也没有那么简单。
演示与香草JavaScript
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>与jQuery演示
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
However if you want a more accurate timer that is only slightly more complicated:
然而，如果你想要一个更精确的计时器，它只是稍微复杂一点:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>Now that we have made a few pretty simple timers we can start to think about re-usability and separating concerns. We can do this by asking "what should a count down timer do?"
现在我们已经做了一些非常简单的定时器，我们可以开始考虑可重用性和分离关注点。我们可以这样问:“倒数计时器应该做什么?”
- Should a count down timer count down? Yes
- 倒数计时器应该倒数吗?是的
- Should a count down timer know how to display itself on the DOM? No
- 计数计时器应该知道如何在DOM上显示自己吗?没有
- Should a count down timer know to restart itself when it reaches 0? No
- 计数计时器是否应该知道当它达到0时重新启动自己?没有
- Should a count down timer provide a way for a client to access how much time is left? Yes
- 计数计时器是否应该为客户端提供访问剩余时间的方法?是的
So with these things in mind lets write a better (but still very simple) CountDownTimer
考虑到这些，让我们写一个更好(但仍然非常简单)的CountDownTimer
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
So why is this implementation better than the others? Here are some examples of what you can do with it. Note that all but the first example can't be achieved by the startTimer functions.
那么，为什么这个实现比其他实现更好呢?这里有一些你可以使用它的例子。注意，除了第一个示例外，其他所有示例都不能通过startTimer函数实现。
An example that displays the time in XX:XX format and restarts after reaching 00:00
一个用XX:XX格式显示时间并在00:00后重新启动的示例
An example that displays the time in two different formats
以两种不同格式显示时间的示例。
An example that has two different timers and only one restarts
一个有两个不同定时器的例子，只有一个重新启动。
An example that starts the count down timer when a button is pressed
当按下按钮时启动计数计时器的示例
#2
19
If you want a real timer you need to use the date object.
如果你想要一个真正的计时器，你需要使用日期对象。
Calculate the difference.
计算的差别。
Format your string.
你的字符串格式。
window.onload=function(){
var start=Date.now(),r=document.getElementById('r');
(function f(){
var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
if(diff>3e5){
start=Date.now()
}
setTimeout(f,1e3);
})();
}
Example
例子
Jsfiddle
not so precise timer
不是很精确的计时器
var time=5*60,r=document.getElementById('r'),tmp=time;
setInterval(function(){
var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
tmp!=0||(tmp=time);
},1000);
JsFiddle
#3
9
You can easily create a timer functionality by using setInterval.Below is the code which you can use it to create the timer.
您可以通过使用setInterval轻松创建计时器功能。下面是您可以使用它来创建计时器的代码。
http://jsfiddle.net/ayyadurai/GXzhZ/1/
http://jsfiddle.net/ayyadurai/GXzhZ/1/
<div>
Registration closes in <span id="timer">05:00<span> minutes!
</div>
<script>
window.onload = function(){
var hou = 2;
var sec = 60;
setInterval(function(){
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 60;
if (hou == 0)
{
hou = 2;
}
}
},500);
}
</script>
#1
322
I have two demos, one with jQuery and one without. Neither use date functions and are about as simple as it gets.
我有两个演示，一个带有jQuery，一个没有。它们都不使用日期函数，也没有那么简单。
演示与香草JavaScript
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>与jQuery演示
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 5,
display = $('#time');
startTimer(fiveMinutes, display);
});
However if you want a more accurate timer that is only slightly more complicated:
然而，如果你想要一个更精确的计时器，它只是稍微复杂一点:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};<body>
<div>Registration closes in <span id="time"></span> minutes!</div>
</body>Now that we have made a few pretty simple timers we can start to think about re-usability and separating concerns. We can do this by asking "what should a count down timer do?"
现在我们已经做了一些非常简单的定时器，我们可以开始考虑可重用性和分离关注点。我们可以这样问:“倒数计时器应该做什么?”
- Should a count down timer count down? Yes
- 倒数计时器应该倒数吗?是的
- Should a count down timer know how to display itself on the DOM? No
- 计数计时器应该知道如何在DOM上显示自己吗?没有
- Should a count down timer know to restart itself when it reaches 0? No
- 计数计时器是否应该知道当它达到0时重新启动自己?没有
- Should a count down timer provide a way for a client to access how much time is left? Yes
- 计数计时器是否应该为客户端提供访问剩余时间的方法?是的
So with these things in mind lets write a better (but still very simple) CountDownTimer
考虑到这些，让我们写一个更好(但仍然非常简单)的CountDownTimer
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
So why is this implementation better than the others? Here are some examples of what you can do with it. Note that all but the first example can't be achieved by the startTimer functions.
那么，为什么这个实现比其他实现更好呢?这里有一些你可以使用它的例子。注意，除了第一个示例外，其他所有示例都不能通过startTimer函数实现。
An example that displays the time in XX:XX format and restarts after reaching 00:00
一个用XX:XX格式显示时间并在00:00后重新启动的示例
An example that displays the time in two different formats
以两种不同格式显示时间的示例。
An example that has two different timers and only one restarts
一个有两个不同定时器的例子，只有一个重新启动。
An example that starts the count down timer when a button is pressed
当按下按钮时启动计数计时器的示例
#2
19
If you want a real timer you need to use the date object.
如果你想要一个真正的计时器，你需要使用日期对象。
Calculate the difference.
计算的差别。
Format your string.
你的字符串格式。
window.onload=function(){
var start=Date.now(),r=document.getElementById('r');
(function f(){
var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
if(diff>3e5){
start=Date.now()
}
setTimeout(f,1e3);
})();
}
Example
例子
Jsfiddle
not so precise timer
不是很精确的计时器
var time=5*60,r=document.getElementById('r'),tmp=time;
setInterval(function(){
var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
tmp!=0||(tmp=time);
},1000);
JsFiddle
#3
9
You can easily create a timer functionality by using setInterval.Below is the code which you can use it to create the timer.
您可以通过使用setInterval轻松创建计时器功能。下面是您可以使用它来创建计时器的代码。
http://jsfiddle.net/ayyadurai/GXzhZ/1/
http://jsfiddle.net/ayyadurai/GXzhZ/1/
<div>
Registration closes in <span id="timer">05:00<span> minutes!
</div>
<script>
window.onload = function(){
var hou = 2;
var sec = 60;
setInterval(function(){
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 60;
if (hou == 0)
{
hou = 2;
}
}
},500);
}
</script>