<div class="sale-date p-2"></div>
<div class="soon-date p-2 text-danger"></div>
<div class="past-date p-2 text-success"></div>
const countdownTimer = (targetDateString, elementSelector, endHTML) => {
const targetDate = new Date(targetDateString);
const el = document.querySelector(elementSelector);
const oo = n => n.toString().padStart(2, '0');
const updateCountDown = () => {
let seconds = Math.floor((targetDate - new Date()) / 1000);
if (seconds <= 0) {
el.innerHTML = endHTML;
return;
}
const days = Math.floor(seconds / 86400);
seconds -= days * 86400;
const hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
const minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
el.innerHTML = (days ? `${days} days` : '') + ' ' + [hours, minutes, seconds].map(oo).join(':');
setTimeout(updateCountDown, 200);
};
updateCountDown();
};
countdownTimer('Jan 10, 2024 00:45:21', '.sale-date', 'Распродажа <strong>уже идёт!</strong>');
countdownTimer('Jan 10, 2023 12:00:00', '.soon-date', '10-е января, полдень, уже!');
countdownTimer('Jan 10, 2022 15:00:00', '.past-date', 'Всё в прошлом');
This Pen doesn't use any external JavaScript resources.