Le compte à rebours JavaScript le plus simple possible?
Je voulais juste demander comment créer le compte à rebours le plus simple possible.
Il y aura une phrase sur le site disant:
"L'inscription ferme dans 05:00 minutes!"
Donc, ce que je veux faire est de créer un compte à rebours js simple qui va de "05:00" à "00:00" puis réinitialise à "05:00" une fois que cela se termine.
Je répondais à quelques réponses auparavant, mais elles semblent toutes trop intenses (objets Date, etc.) pour ce que je veux faire.
J'ai deux démos, une avec jQuery et l'autre sans. Ni utiliser les fonctions de date et sont aussi simples que possible.
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>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);
});
Cependant, si vous voulez un minuteur plus précis et légèrement plus compliqué:
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>Maintenant que nous avons créé quelques minuteries assez simples, nous pouvons commencer à penser à la possibilité de réutilisation et à la séparation des préoccupations. Nous pouvons le faire en demandant "que doit faire un compte à rebours?"
- Un compte à rebours doit-il être décompté? Oui
- Un compte à rebours doit-il savoir s’afficher sur le DOM? Non
- Un compte à rebours doit-il savoir qu'il se redémarre lorsqu'il atteint 0? Non
- Un compte à rebours doit-il permettre à un client d’accéder au temps qu’il lui reste? Oui
Donc, avec ces choses en tête, écrivons un meilleur (mais toujours très simple) 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
};
};
Alors pourquoi cette implémentation est-elle meilleure que les autres? Voici quelques exemples de ce que vous pouvez faire avec. Notez que tout, sauf le premier exemple, ne peut pas être obtenu avec les fonctions startTimer.
n exemple qui affiche l'heure au format XX: XX et redémarre après avoir atteint 00:
n exemple qui affiche l'heure dans deux formats différents
n exemple qui a deux minuteries différentes et une seule redémarre
n exemple qui démarre le compte à rebours lorsqu'un bouton est enfoncé
Si vous voulez une vraie minuterie, vous devez utiliser l'objet date.
Calculez la différence.
Formatez votre chaîne.
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);
})();
}
Exemple
Jsfiddle
minuterie pas si précise
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
Vous pouvez facilement créer une fonctionnalité de minuterie à l'aide de setInterval.Below est le code que vous pouvez utiliser pour créer la minuterie.
http://jsfiddle.net/ayyadurai/GXzhZ/1/
window.onload = function() {
var hour = 2;
var sec = 60;
setInterval(function() {
document.getElementById("timer").innerHTML = hour + " : " + sec;
sec--;
if (sec == 00) {
hour--;
sec = 60;
if (hour == 0) {
hour = 2;
}
}
}, 1000);
}Registration closes in <span id="timer">05:00<span> minutes!