chevron_right

Генератор Таймера Обратного Отсчёта

Создайте встраиваемый живой HTML-таймер обратного отсчёта для любой даты. Копируйте и вставляйте на любой сайт без внешних скриптов.

Целевая дата и время

Подпись над таймером

Сообщение по истечении

Тема

Живой предпросмотр

Launching In

Days

Hours

Minutes

Seconds

Встраиваемый HTML

<div id="cd_jo3c1d" style="font-family:system-ui,sans-serif;background:#0f172a;color:#f8fafc;padding:1.5rem;border-radius:0.75rem;text-align:center;display:inline-block;">
  <div style="font-size:1rem;margin-bottom:0.75rem;opacity:0.8">Launching In</div>
  <div class="cd-grid" style="display:flex;gap:0.75rem;justify-content:center;">
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-d" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Days</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-h" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Hours</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-m" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Minutes</div></div>
    <div style="background:#1e293b;padding:0.75rem 1rem;border-radius:0.5rem;min-width:4rem;"><div class="cd-s" style="font-size:2rem;font-weight:700;color:#38bdf8">0</div><div style="font-size:0.75rem;opacity:0.7">Seconds</div></div>
  </div>
</div>
<script>(function(){var el=document.getElementById("cd_jo3c1d"),t=1776987780000;function p(n){return String(n).padStart(2,"0")}function u(){var d=t-Date.now();if(d<=0){el.innerHTML='<div style="font-size:1.5rem;font-weight:700;color:#38bdf8">We're live!</div>';return}var s=Math.floor(d/1000),D=Math.floor(s/86400),H=Math.floor(s%86400/3600),M=Math.floor(s%3600/60),S=s%60;el.querySelector('.cd-d').textContent=D;el.querySelector('.cd-h').textContent=p(H);el.querySelector('.cd-m').textContent=p(M);el.querySelector('.cd-s').textContent=p(S);requestAnimationFrame(function(){setTimeout(u,1000)})}u()})();</script>

Похожие инструменты

Генератор Unix-меток времени

Сгенерируйте текущую Unix-метку, конвертируйте любую дату или создайте пакет случайных меток.

Генератор Случайных Дат

Генерируйте случайные даты в заданном диапазоне с настройками количества, формата и времени.

Генератор HTML-таблиц

Создавайте HTML-разметку таблиц из простых строк, разделенных запятыми.

Объединить PDF

Объедините несколько PDF-файлов в один документ быстро и безопасно в вашем браузере.

Проверка UUID

Проверяйте UUID и определяйте версию, вариант и нормализованную форму.

Выделение текста в PDF

Автоматически выделяйте каждое вхождение одного или нескольких слов или фраз в PDF с помощью полупрозрачных цветных наложений.

apps

Больше инструментов

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

Создайте Таймер Обратного Отсчёта за Секунды

Таймеры обратного отсчёта создают ощущение срочности. Запускаете продукт, проводите акцию, отсчитываете дни до события или делаете страницу «скоро» — живой таймер удерживает посетителей и концентрирует их внимание на предстоящем. Генератор Таймера Обратного Отсчёта создаёт полный, самодостаточный HTML-фрагмент, который можно вставить на любой сайт — WordPress, Shopify, Webflow, Notion, чистый HTML — без библиотек и внешних зависимостей.

Что Вы Получаете

Один <div> и инлайновый <script>. Без CDN, без npm, без этапа сборки. Скрипт обновляется раз в секунду и автоматически обрабатывает состояние «время вышло».

Настройка

Целевая дата и время — укажите точный момент завершения отсчёта.
Подпись — строка текста над ячейками (например: «Запуск через», «Акция заканчивается через»).
Сообщение по истечении — что показывать, когда таймер дойдёт до нуля («Мы в эфире!», «Распродано» и т.д.).
Тема — Тёмная, Светлая или Минималистичная (наследует шрифт и цвета родительского сайта).

Идеально Подходит Для

Запусков продуктов и краудфандинговых кампаний
Флеш-распродаж, Чёрной пятницы, ограниченных по времени предложений
Обратных отсчётов до вебинаров или прямых трансляций
Свадебных и событийных таймеров
Лендингов «скоро»

Технические Особенности

Фрагмент использует только ванильный JavaScript и инлайновый CSS. Уникальный случайный ID позволяет разместить несколько таймеров на одной странице без конфликтов. Обратный отсчёт работает от часов устройства посетителя — для строго синхронизированных маркетинговых таймеров рассмотрите серверный резерв.

Конфиденциальность

Генератор работает полностью в вашем браузере. Мы никогда не видим вашу целевую дату, подпись или страницы, на которых вы используете фрагмент.