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!
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
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>