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
    Commented el 8 oct. 2018 a las 14:45
  • Un placer, para eso estamos :)
    – Carmen
    Commented el 8 oct. 2018 a las 14:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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