I am trying to do a countdown in Javascript. I have the code now and it works fine, but I want to have more dates. So the first countdown is May 12, 2022 16:04:00, then I want a new 48h countdown from May 14, 2022 16:04:00, May 16, 2022 16:04:00 and so on. So when its May 12, 2022 16:04:01 I want a new 48h timer to start and countdown to May 14. Is this possible? Thanks for the help!
var countDownDate = new Date("May 12, 2022 16:04:00").getTime();
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countDownDate - now;
var hours = Math.floor((distance % (1000 * 120 * 120 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
if (distance < 0) { clearInterval(x); document.getElementById("countdown-text").innerHTML = "48H"; }
}, 1000);
<div id="countdown">
<div class="countdown-hours">
<p id="hours"></p><span>hours</span>
</div>
<div class="countdown-minutes">
<p id="minutes"></p><span>minutes</span>
</div>
<div class="countdown-seconds">
<p id="seconds"></p><span>seconds</span>
</div>
</div>
var countDownDate = new Date("May 12, 2022 16:04:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var hours = Math.floor((distance % (1000 * 120 * 120 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
if (distance < 0) {
var numberOfMlSeconds = new Date().getTime();
var addMlSeconds = 48 * 60 * 60 * 1000;
countDownDate = new Date(numberOfMlSeconds + addMlSeconds);
}
}, 1000);
<div id="countdown">
<div class="countdown-hours">
<p id="hours"></p><span>hours</span>
</div>
<div class="countdown-minutes">
<p id="minutes"></p><span>minutes</span>
</div>
<div class="countdown-seconds">
<p id="seconds"></p><span>seconds</span>
</div>
</div>