¿El temporizador de cuenta regresiva de JavaScript más simple posible? [cerrado]

240

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:

"¡El registro cierra en 05:00 minutos!"

Entonces, lo que quiero hacer es crear un simple temporizador de cuenta regresiva js que vaya de "05:00" a "00:00" y luego se restablezca a "05:00" una vez que termine.

Estaba revisando algunas respuestas antes, pero todas parecen demasiado intensas (objetos de fecha, etc.) para lo que quiero hacer.

javascript timer countdown countdowntimer Bartek
fuente
44
Y de nuevo, está omitiendo el HTML relevante, aunque al menos ha explicado el problema de complejidad esta vez. Pero en serio, debe buscar una solución usted mismo y luego preguntarnos sobre los problemas que tiene.
David dice que reinstale a Mónica el
¿Ejemplos de código con quejas sobre cómo son demasiado complicados? De todos modos, creo que podría fácilmente setIntervaly hacerlo .innerHTML basado, en lugar de fecha.
bjb568
1
Sí, las personas deberían buscar hacer la solución por sí mismas. Pero con javaScript hay muchos ejemplos de tareas comunes. Sé cómo hacer un temporizador de cuenta regresiva, pero prefiero si encuentro uno en la web (como un componente). Entonces, gracias a esta pregunta y la extensa respuesta, encontré lo que estaba buscando. Lógica de cuenta regresiva
Carlos Rafael Ramírez
2
Encontré que estas soluciones son más simples: stackoverflow.com/questions/32141035/…
nu everest
Mira esto: sitepoint.com/build-javascript-countdown-timer-no-dependencies
Erich García

Respuestas:

491

Tengo dos demos, una con jQueryy otra sin. Tampoco usan funciones de fecha y son tan simples 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);
};
<body>
    <div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>
Expandir fragmento

Demo 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() {
        // 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>
Expandir fragmento

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

  • ¿Debe un temporizador de cuenta regresiva? si
  • ¿Debe un temporizador de cuenta atrás saber cómo mostrarse en el DOM? No
  • ¿Debe un temporizador de cuenta atrás saber reiniciarse cuando llega a 0? No
  • ¿Debería un temporizador de cuenta regresiva proporcionar una manera para que un cliente acceda a cuánto tiempo le queda? si

Entonces, con estas cosas en mente, vamos a escribir una mejor (pero aún muy 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
  };
};

Entonces, ¿por qué esta implementación es mejor que las otras? Aquí hay algunos ejemplos de lo que puede hacer con él. Tenga en cuenta que todas las startTimerfunciones, excepto el primer ejemplo, no se pueden lograr .

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

robbmj
fuente
2
¡Eres el hombre! Eso es exactamente lo que estaba buscando. ¡Gracias! Una cosa más: ¿cómo puedo agregar "0" antes de minutos, para que muestre "04:59", en lugar de "4:59"?
Bartek
1
minutes = minutes < 10 ? "0" + minutes : minutes;
robbmj
8
@timbram también me pareció extraño al principio, hasta que me di cuenta de que una coma después de una vardeclaración separa las diferentes declaraciones. so minutesy secondssimplemente son variables declaradas (pero no inicializadas). entonces timersimplemente es igual al durationparámetro, nada más y nada menos.
abustamam
2
@SinanErdem He escrito un código que hace esto. Puedo agregar ese código a la respuesta más tarde hoy. Te haré un ping cuando esto esté hecho.
robbmj
3
¿Cómo se agregan las opciones de reinicio? ¿Y también una pausa y currículum? Intenté agregar un campo this.reset y verifiqué eso en el cierre. Pero el reloj sigue funcionando sin embargo.
Dzung Nguyen
24

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

Calcula 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

coco
fuente
16

Puede crear fácilmente una funcionalidad de temporizador utilizando setInterval. Debajo está el código que puede usar 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 <span id="timer">05:00<span> minutes!
Expandir fragmento

Durai
fuente
3
No representa con precisión cada segundo, está contando demasiado rápido.
Scott Rowley
44
Cambiar 500 a 1000 parece que sea preciso.
Scott Rowley
Solución ingeniosa, la hora debe cambiarse a minuto para evitar confusiones
embulldogs99