Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
}
.timer__items {
display: flex;
font-size: 48px;
}
.timer__item {
position: relative;
min-width: 60px;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 15px;
text-align: center;
}
.timer__item::before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
font-size: 14px;
}
.timer__item:not(:last-child)::after {
content: ':';
position: absolute;
right: -15px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let divs = document.querySelectorAll('[data-end]');
// склонение числительных
function declensionNum(num, words) {
return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}
// вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
function countdownTimer() {
divs.forEach(div => {
let deadline = new Date(div.dataset.end);
const diff = deadline - new Date();
const days = diff > 0 ? Math.ceil(diff / 1000 / 60 / 60 / 24) : 0;
div.textContent = days < 10 ? '0' + days : days;
div.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
})
setTimeout(countdownTimer, 1000)
}
// вызываем функцию countdownTimer
countdownTimer();
});
</script>
</head>
<body>
До нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/1/2023">00</div>
</div>
</div>
До Рождества
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/7/2023">00</div>
</div>
</div>
До старого нового года
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days" data-end="1/14/2023">00</div>
</div>
</div>
</body>
</html>