Как пользоваться: Генератор таймера обратного отсчёта
- Укажите дату и время окончания и часовой пояс, в котором они заданы. Таймер сам пересчитает время, и для каждого посетителя он закончится в один и тот же момент.
- Выберите, какие единицы показывать, и введите подписи на нужном языке.
- Решите, что произойдёт при нуле: покажется сообщение, таймер скроется или посетитель перейдёт на страницу.
- Выберите стиль и цвета, затем скопируйте код в блок Embed (Webflow) или Custom HTML (WordPress).
Один момент для всех посетителей
Время окончания сохраняется как точный момент в UTC, рассчитанный по дате, времени и часовому поясу, которые вы выбрали, с учётом перехода на летнее время в этот день. Посетитель из Токио и посетитель из Нью-Йорка видят разные местные часы, но таймер обнуляется в один и тот же момент.
Лёгкий и автономный код
Код занимает несколько строк HTML, CSS и JavaScript и не требует библиотек. Стили ограничены уникальным классом, поэтому не конфликтуют с вашим сайтом. Таймер обновляется раз в секунду, использует aria-live в мягком режиме, чтобы не перегружать программы для чтения с экрана, и приостанавливает работу, когда вкладка скрыта. На одной странице может быть несколько таймеров: создайте отдельный код для каждого.
Используйте таймеры только для реальных дедлайнов. Фальшивые «вечнозелёные» таймеры, которые перезапускаются для каждого посетителя, вводят покупателей в заблуждение и во многих странах запрещены законами о защите потребителей. Также см.: Конвертер часовых поясов, Конвертер Unix-времени.
Также ищут как: таймер обратного отсчёта html, таймер обратного отсчёта webflow.
Инструменты, которые хорошо сочетаются с Генератор таймера обратного отсчёта
- Калькулятор разницы дат — Считайте дни между двумя датами, включая рабочие дни и разбивку на годы, месяцы и дни.
- Генератор баннера cookie — Добавьте баннер согласия на cookie на любой сайт — Webflow, WordPress, Shopify или обычный HTML — без платного плагина.
- HTML и CSS в Webflow — Вставьте HTML и его CSS, нажмите Скопировать в Webflow и вставьте результат в Designer.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.