CODEWITHSUNDEEP
html
user3314404
user3314404

Reputation: 79

HTML countdown timer with sequenced events

In HTML, i have a countdown timer, courtesy of w3, but I can’t seem to figure out how, once the time has expired, to reload the timer with the next date. For example I want to countdown between holidays. I assume I need to compare to today’s date, but not sure what that module looks like either. Any help would be appreciated. Thx

var countDownDate = new Date("Jan 1, 2021 01:37:25").getTime();

var countDownDate = new Date("Feb 14, 2021 01:37:25").getTime();

var countDownDate = new Date("Mar 17, 2021 15:37:25").getTime();

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

 // Get today's date and time
 var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  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);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
   clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Upvotes: 0

Views: 208

Answers (1)

calii23
calii23

Reputation: 88

This should do the trick for you:

const dates = [
  new Date("Jan 1, 2021 01:37:25").getTime(),
  new Date("Feb 14, 2021 01:37:25").getTime(),
  new Date("Mar 17, 2021 15:37:25").getTime(),
];

const interval = setInterval(tick, 1000);

function nextDate() {
  const now = Date.now();
  return dates.find(date => date > now);
}

function tick() {
  const date = nextDate();
  if (!date) {
    clearInterval(interval);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  let distance = date - Date.now();
  
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  distance -= days * 1000 * 60 * 60 * 24;
  
  const hours = Math.floor(distance / (1000 * 60 * 60));
  distance -= hours * 1000 * 60 * 60;
  
  const minutes = Math.floor(distance / (1000 * 60));
  distance -= minutes * 1000 * 60;
  
  const seconds = Math.floor(distance / 1000);
  
  document.getElementById("demo").innerHTML = `Time until ${new Date(date).toLocaleDateString()}: ${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
}

It only clears the interval when there are no more dates in future left. You can change the dates by changing the array in the dates variable. But be aware, that you must keep the ascending sort of the dates.

Upvotes: 1

Related Questions