6

Quiero hacer un cooldown que cuando llegue al final de por ejemplo 24h sume 1 día y vuelva a comenzar la cuenta atrás de 24h, si alguien me pudiera ayudar le estaría muy agradecido, gracias de antemano Aquí algo de lo que llevo hecho intentándolo:

var countDownYear = new Date().getFullYear();
var countDownMonth = new Date().getMonth() + 1;
var countDownDay = new Date().getDate();
var countDownDate = new Date(countDownMonth + " " + countDownDay + ", " + countDownYear + " 15:27:30").getTime();

var x = setInterval(function () {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.querySelector('#daily-time').innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s";

  if (distance < 0) {
    console.log(countDownDay);
    countDownDay++;
    console.log(countDownDay);
    clearInterval(x);
  }
}, 1000);
<div id="daily-time"></div>

1 respuesta 1

3

Le puedes sumar 1 día (en milisegundos a la variable) cuando la diferencia sea igual o menor de cero y se reinicia la cuenta atrás en positivo. En el ejemplo lo pongo después de rellenar el div para que se vea el cambio en el primer segundo.

var countDownYear = new Date().getFullYear();
var countDownMonth = new Date().getMonth() + 1;
var countDownDay = new Date().getDate();
var countDownDate = new Date(countDownMonth + " " + countDownDay + ", " + countDownYear + " 16:00:00").getTime();

var x = setInterval(function () {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.querySelector('#daily-time').innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s";

  if (distance <=0) {
    countDownDate = countDownDate+86400000;
  }
}, 1000);
<div id="daily-time"></div>

Si no quieres que se vea el salto, lo compruebas nada más calcular la variable distance y la vuelves a calcular con el nuevo valor.

var countDownYear = new Date().getFullYear();
var countDownMonth = new Date().getMonth() + 1;
var countDownDay = new Date().getDate();
var countDownDate = new Date(countDownMonth + " " + countDownDay + ", " + countDownYear + " 16:00:00").getTime();

var x = setInterval(function () {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  if (distance <=0) {
    countDownDate = countDownDate+86400000;
    distance = countDownDate - now;
  }

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.querySelector('#daily-time').innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s";

  
}, 1000);
<div id="daily-time"></div>

2
  • Gracias! Justo lo que necesitaba.
    – JoShMiQueL
    el 8 oct. 2018 a las 14:45
  • Un placer, para eso estamos :)
    – Carmen
    el 8 oct. 2018 a las 14:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.