Javascript countdown to show, remind and hide a message on a specified date

user_18300939 0
Viewed 62

I have been trying to get this counter to display remaining day to a set date, then, display a message on the set date and finally hide the message after the date has passed.

Here is what I have so far...

// Set the date we're counting down to
var countDownDate = new Date("June 26, 2022 1:01:00").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);
    // Output the result in an element with id="countdown"
    if (distance > 0) {
        document.getElementById("countdown").innerHTML = days + " days until the June 30th, 2022";
    } else if (distance == 0) {
        document.getElementById("countdown").innerHTML = "Time To Vote";
    } else {
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}, 1000);

The script above shows countdown of days left and "EXPIRED" when the date counter ends, but it does not show the message "Time to Vote" on the set day. Thank you for your help!

countdown javascript
2 Answers

I have a limited knowledge, and a small reputational score to comment, on what you are doing, but are you also factoring in that new Date().getTime() returns epoch milliseconds?

Meaning that, if the epoch milliseconds of that date, does not exactly match the current epoch milliseconds, it will not run.

So, the Epoch of the date may be (example) 1000 but the current epoch can be 1001, and it would not work.

You could try matching the individual time units using new Date().getHours(), new Date().getSeconds(), etc, to limit how far down it should check.

EDIT: I haven't tested, and this is probably a terrible idea, but you could remove the last 5 or so digits of both epoch timestamps either by dividing and calling .toFixed() or making it a string and using String.slice(), then compare them

user_169927490

you can do something like this

var countDownDate = new Date("June 26, 2022 0:00:00").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);

  // Output the result in an element with id="countdown"
  if (days > 0) {
     const time = [hours, minutes, seconds].map(s => s.toString().padStart(2, '0')).join(':')
    document.getElementById("countdown").innerHTML = `${days} days and ${time} until the June 30th, 2022`;
  } else if (days === 0) {
    document.getElementById("countdown").innerHTML = "Time To Vote";
  } else {
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);
<div id="countdown"></div>

user_143268990
Related