const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('February 03, 2021 12:10:00').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
var hours = Math.floor((distance % (day)) / (hour));
var days = Math.floor(distance / (day));
var minutes = Math.floor((distance % (hour)) / (minute));
var seconds = Math.floor((distance % (minute)) / second);
document.getElementById('days').innerText = (days < 10) ? '0' + days : days,
document.getElementById('hours').innerText = (hours < 10) ? '0' + hours : hours,
document.getElementById('minutes').innerText = (minutes < 10) ? '0' + minutes : minutes,
document.getElementById('seconds').innerText = (seconds < 10) ? '0' + seconds : seconds;
}, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
countDown = "0" + countDown;
}
#timer {
list-style-type: none;
justify-content: center;
display: flex;
}
#timer>li {
float: left;
font-size: 50px;
padding: 0px 20px;
font-weight: bold;
}
.timer_text {
font-size: 15px;
text-align: center;
}
<p style="text-align:center;text-transform:uppercase;font-weight:bold; font-size:25px;">Count down</p>
<ul id="timer">
<li class="clock_li"><span id="days"></span>
<p class="timer_text">DAYS</p>
</li>
<li>:</li>
<li class="clock_li"><span id="hours"></span>
<p class="timer_text">HOURS</p>
</li>
<li>:</li>
<li class="clock_li"><span id="minutes"></span>
<p class="timer_text">MINUTES</p>
</li>
<li>:</li>
<li class="clock_li"><span id="seconds"></span>
<p class="timer_text">SECONDS</p>
</li>
</ul>
Hi guys! i want this countdown is stop and display 0 in each part (day, hour, min, sec) after zero but as you can see in the code, now it display as "0-(time)". what should i add in my script to make it stop and show "00" in each part after timeout?
so as a result, i want to make it 00:00:00:00 after timeout :) any help will be so appreciated thanks! :)