Create and repeat Cooldown

Question

Create and repeat Cooldown

Navigation

#1 by (3 votes)

6

I want to make a cooldown that when I reach the end of for example 24h add 1 day and start the countdown again of 24h, if someone could help me I would be very grateful, thanks in advance Here something of what I've done trying:

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>

javascript

asked by JoShMiQueL 08.10.2018 в 15:35

source

1 answer

Add new value to an enum type field in Laravel Web API 2, OData v4 and Automapper

score 3 · Accepted Answer

You can add 1 day (in milliseconds to the variable) when the difference is equal to or less than zero and the countdown is reset to positive. In the example I put it after filling the div so that the change is seen in the first second.

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>

If you do not want the jump to be seen, you check it as soon as you calculate the distance variable and re-calculate it with the new value.

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>