¿El temporizador de cuenta atrás de JavaScript más simple posible?

Matías, parte de este equipo de trabajo, nos hizo el favor de crear este artículo porque domina a la perfección este tema.

Solución:

Tengo dos demos, una con jQuery y uno sin. Ninguno de los dos usa funciones de fecha y es tan simple como parece.

Demostración con JavaScript vainilla

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);
;

    
Registration closes in 05:00 minutes!

Demostración con 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);
);

Sin embargo, si desea un temporizador más preciso que sea solo un poco más complicado:

function startTimer(duration, display) 
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer()  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);
;

    
Registration closes in  minutes!

Ahora que hemos creado algunos temporizadores bastante sencillos, podemos empezar a pensar en la reutilización y la separación de preocupaciones. Podemos hacer esto preguntando "¿qué debe hacer un temporizador de cuenta regresiva?"

• ¿Debe un temporizador de cuenta regresiva contar hacia atrás? sí
• ¿Debería un temporizador de cuenta atrás saber cómo mostrarse en el DOM? No
• ¿Debería un temporizador de cuenta regresiva saber que se reinicia automáticamente cuando llega a 0? No
• ¿Debería un temporizador de cuenta atrás proporcionar una forma para que un cliente acceda a cuánto tiempo queda? sí

Entonces, con estas cosas en mente, escribamos una mejor (pero aún muy simple) CountDownTimer

function CountDownTimer(duration, granularity) 
  this.duration = duration;
  this.granularity = granularity 

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) ());
;

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  0
  ;
;

Entonces, ¿por qué esta implementación es mejor que las demás? A continuación, se muestran algunos ejemplos de lo que puede hacer con él. Tenga en cuenta que todos los ejemplos, excepto el primero, no pueden lograrse mediante el startTimer funciones.

Un ejemplo que muestra la hora en formato XX: XX y se reinicia después de llegar a las 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 atrás cuando se presiona un botón

Si desea un temporizador real, debe usar el objeto de fecha.

Calcule la diferencia.

Formatea tu 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);
      )();

Ejemplo

Jsfiddle

temporizador no tan preciso

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function()(tmp=time);
,1000);

JsFiddle

Puede crear fácilmente una función de temporizador utilizando setInterval. A continuación se muestra el código que puede utilizar para crear el temporizador.

http://jsfiddle.net/ayyadurai/GXzhZ/1/

window.onload = function() 
  var minute = 5;
  var sec = 60;
  setInterval(function() 
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) 
      minute --;
      sec = 60;
      if (minute == 0) 
        minute = 5;
      
    
  , 1000);

Registration closes in 05:00 minutes!

Calificaciones y reseñas

Recuerda que te brindamos la opción de añadir un criterio si diste con el arreglo.

---

---

Utiliza Nuestro Buscador