segundos - ¿El temporizador de cuenta atrás de JavaScript más simple posible?
cuenta regresiva php (3)
Puede crear fácilmente una funcionalidad de temporizador utilizando setInterval.Below es el código que puede usar para crear el temporizador.
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>
Solo quería preguntar cómo crear el temporizador de cuenta regresiva más simple posible.
Habrá una oración en el sitio que dice:
"¡La inscripción cierra a las 05:00 minutos!"
Entonces, lo que quiero hacer es crear un temporizador simple de cuenta regresiva js que vaya de "05:00" a "00:00" y luego se reinicie a "05:00" una vez que termine.
Estaba repasando algunas respuestas antes, pero todas parecen demasiado intensas (objetos de fecha, etc.) para lo que quiero hacer.
Si desea un temporizador real, necesita usar el objeto de fecha.
Calcule la diferencia
Formatea tu cadena.
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);
})();
}
Ejemplo
Jsfiddle
temporizador no tan preciso
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
Tengo dos demos, una con jQuery y otra sin ella. No use las funciones de fecha y sea lo más simple posible.
Demostración con JavaScript vanidoso
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);
});
Sin embargo, si quiere un temporizador más preciso que es solo un poco más complicado:
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>
Ahora que hemos creado algunos cronómetros bastante simples, podemos comenzar a pensar en la reutilización y separar las preocupaciones. Podemos hacer esto preguntando "¿qué debería hacer un temporizador de cuenta atrás?"
- ¿Debería descender la cuenta atrás del cronómetro? Sí
- ¿Debería un temporizador de cuenta regresiva saber cómo mostrarse en el DOM? No
- ¿Debería saber un temporizador de cuenta atrás reiniciarse cuando llegue a 0? No
- ¿Debe un temporizador de cuenta regresiva proporcionar una forma para que un cliente tenga acceso a cuánto tiempo queda? Sí
Entonces, con estas cosas en mente, escribamos un CountDownTimer mejor (pero aún muy simple)
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
};
};
Entonces, ¿por qué esta implementación es mejor que las demás? Aquí hay algunos ejemplos de lo que puede hacer con él. Tenga en cuenta que todos menos el primer ejemplo no se pueden lograr con las funciones startTimer .
Un ejemplo que muestra la hora en formato XX: XX y se reinicia después de llegar a 00:00
Un ejemplo que muestra la hora en dos formatos diferentes
Un ejemplo que tiene dos temporizadores diferentes y solo uno se reinicia
Un ejemplo que inicia el temporizador de cuenta regresiva cuando se presiona un botón