Скрипт таймера на html

20.03.2026

Як створити стильний таймер зворотного відліку на HTML, CSS та JavaScript

Привіт усім! Сьогодні я хочу поділитися з вами цікавим і водночас простим рішенням для вашого сайту — анімованим таймером зворотного відліку. Такий елемент чудово підходить для сторінок “Очікуйте незабаром”, акційних пропозицій або відліку до важливої події.

Особливість цього таймера — ефект перекидних карток (flip animation), що робить його візуально динамічним та сучасним. Ми не будемо використовувати важкі бібліотеки, лише чистий код, який легко скопіювати та адаптувати під ваші потреби.

Чому саме цей таймер?

Повністю адаптивний: він коректно відображається як на моніторах, так і на смартфонах.
Легкий код: мінімум навантаження на сторінку.
Гнучкість: ви можете легко змінити цільову дату або кольорову гаму за допомогою CSS-змінних.

Повний код для вставки

Нижче наведено готовий блок коду. Ви можете створити окремий HTML-файл або вставити його у відповідний віджет на вашому сайті.

  <!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Зворотний відлік</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <style> :root { --card-bg: #333333; --text-color: #ffffff; --font-size: 3.5rem; --anim-speed: 0.6s; } body { background: linear-gradient(135deg, #1e3c72, #2a5298); color: white; font-family: 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } h1 { font-size: 2.5rem; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 5px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .countdown { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; gap: 15px; } .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #d1d1d1; } .flip-card { display: block; position: relative; width: 100px; height: 120px; background-color: var(--card-bg); border-radius: 8px; font-size: var(--font-size); font-weight: 700; line-height: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .top, .bottom, .top-flip, .bottom-flip { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; text-align: center; padding-right: 2px; } .top, .top-flip { top: 0; background-color: #333; border-radius: 8px 8px 0 0; line-height: 120px; border-bottom: 1px solid rgba(0,0,0,0.2); } .bottom, .bottom-flip { bottom: 0; background-color: #393939; border-radius: 0 0 8px 8px; line-height: 0; display: flex; align-items: flex-start; justify-content: center; } .top-flip { z-index: 10; transform-origin: bottom; animation: flip-top var(--anim-speed) ease-in forwards; } .bottom-flip { z-index: 11; transform-origin: top; transform: rotateX(90deg); animation: flip-bottom var(--anim-speed) ease-out var(--anim-speed) forwards; } @keyframes flip-top { to { transform: rotateX(90deg); } } @keyframes flip-bottom { to { transform: rotateX(0deg); } } @media (max-width: 600px) { .flip-card { width: 70px; height: 90px; --font-size: 2.2rem; } .top, .top-flip { line-height: 90px; } .countdown { gap: 10px; } } </style> </head> <body> <h1>ЗАЛИШИЛОСЬ:</h1> <div class="countdown"> <div class="container"><div class="flip-card" id="years"><div class="top">00</div><div class="bottom">00</div></div><div class="label">років</div></div> <div class="container"><div class="flip-card" id="months"><div class="top">00</div><div class="bottom">00</div></div><div class="label">місяців</div></div> <div class="container"><div class="flip-card" id="days"><div class="top">00</div><div class="bottom">00</div></div><div class="label">днів</div></div> <div class="container"><div class="flip-card" id="hours"><div class="top">00</div><div class="bottom">00</div></div><div class="label">годин</div></div> <div class="container"><div class="flip-card" id="minutes"><div class="top">00</div><div class="bottom">00</div></div><div class="label">хвилин</div></div> <div class="container"><div class="flip-card" id="seconds"><div class="top">00</div><div class="bottom">00</div></div><div class="label">секунд</div></div> </div> <script> const targetDate = new Date('2029-08-05T00:00:00'); function updateAll() { const now = new Date(); const diff = targetDate - now; if (diff <= 0) return; const time = { years: Math.floor(diff / (1000 * 60 * 60 * 24 * 365)), months: Math.floor((diff / (1000 * 60 * 60 * 24 * 30)) % 12), days: Math.floor((diff / (1000 * 60 * 60 * 24)) % 30), hours: Math.floor((diff / (1000 * 60 * 60)) % 24), minutes: Math.floor((diff / (1000 * 60)) % 60), seconds: Math.floor((diff / 1000) % 60) }; Object.keys(time).forEach(unit => { const val = time[unit].toString().padStart(2, '0'); flip(document.getElementById(unit), val); }); } function flip(card, newValue) { const topHalf = card.querySelector(".top"); const startValue = topHalf.innerText; if (newValue === startValue) return; const topFlip = document.createElement("div"); topFlip.classList.add("top-flip"); topFlip.innerText = startValue; const bottomFlip = document.createElement("div"); bottomFlip.classList.add("bottom-flip"); bottomFlip.innerText = newValue; const bottomHalf = card.querySelector(".bottom"); topFlip.addEventListener("animationstart", () => { topHalf.innerText = newValue; }); topFlip.addEventListener("animationend", () => { topFlip.remove(); }); bottomFlip.addEventListener("animationend", () => { bottomHalf.innerText = newValue; bottomFlip.remove(); }); card.appendChild(topFlip); card.appendChild(bottomFlip); } setInterval(updateAll, 1000); updateAll(); </script> </body> </html>

Як налаштувати таймер під себе?

Я зробив код максимально зрозумілим, щоб ви могли змінити його за кілька секунд:

Дата відліку: Знайдіть у скрипті рядок const targetDate = new Date('2029-08-05T00:00:00'); і просто впишіть свою дату.
Кольори: У секції :root ви можете змінити --card-bg (колір карток) та градієнт фону в body.
Швидкість анімації: Параметр --anim-speed дозволяє зробити “перекидання” карток швидшим або повільнішим.

Сподіваюся, цей скрипт стане корисним доповненням для вашого проекту! Якщо у вас виникли питання щодо роботи коду — пишіть у коментарях, буду радий допомогти.

Автор публікації

Офлайн 2 дні

CHILI

Їбать мій хуй , здрастє 😎

Коментарі: 14Публікації: 40Реєстрація: 08-12-2025

USD: 43.44 UAH

EUR: 50.75 UAH

Квітень 2026

Пн Вт Ср Чт Пт Сб Нд

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30

« Бер
Останні коментарі
CHILI до Скрипт таймера на html
CHILI до Безпека на Fedora linux
CHILI до Цифрова фортеця на LMDE
CHILI до Ласкаво просимо!
Категорії

База знань (7)

Виживання (5)

Тренування (1)

Блог (29)

Новини (1)

Скрипти (1)

JavaScript (1)