Конструктор таймера обратного отсчета

Обновлено: 30.04.2024

Чтобы наглядно показать пользователю, сколько времени осталось до завершения акции, и стимулировать его быстрее сделать заказ, добавьте в рассылку таймер. Используйте для этого готовый блок в конструкторе UniSender.

Чтобы сделать таймер, создайте строку с нужным количеством колонок и перетащите туда блок Countdown Timer.

Таймер можно расположить по всей ширине письма или по ширине одной из колонок.

Пример таймера, расположенного по центру письма

Пример таймера в правой колонке

А вот как будет этот же таймер выглядеть на мобильном устройстве

Как настроить таймер

Чтобы настроить таймер, нажмите на кнопку в блоке «Configure Timer».

В новом окне откроются настройки таймера, где можно указать:

дату, время и часовой пояс события;
размер таймера;
цвет цифр и фона;
язык таймера.

Время запуска. Чтобы установить время запуска таймера, выберите дату и время завершения акции, а также часовой пояс, по которому их считать.

Цвета. Вы можете задать цвет текста таймера и цвет его фона одним из следующих способов:

выбрать из палитры вручную;
указать HEX -код цвета;
указать RGB -код цвета;

указать проценты для HSL-координат.

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

Размер. Выберите маленький, средний или большой размер. Большой размер подойдет, если таймер размещается на всю ширину письма, а средний и маленький — если он расположен в одной из двух или трех колонок.

Язык. Таймер в UniSender работает на 3-х языках: украинском, русском и английском.

После того как вы настроите блок с таймером, его в любой момент можно отредактировать в свойствах блока, которые отображаются слева при клике на блок.

Кроме того, в свойствах блока есть и другие важные настройки:

Ширина таймера. Задается с помощью ползунка с %. Настройка «Автоширина» подстраивает таймер под ширину письма автоматически, а галочка «Полная ширина на мобильных» отключает адаптивность картинки для мобильных устройств.
Выравнивание. Таймер можно выровнять по левому краю, по центру или по правому краю.
Альт-текст. Так как таймер — это картинка, у него обязательно должен быть альт-текст. Так пользователи, у которых картинки не загрузятся, будут знать, что на них было изображено.
Ссылка. По ссылке пользователь сможет перейти на страницу акции.
Отступы. Расположение таймера внутри блока можно настраивать с помощью отступов.
Настройка отображения. Таймер можно скрыть или на ПК, или на мобильных, если вы хотите, чтобы он отображался в письме только на каком-то одном типе устройств.

Настройки отображения и расположения таймера аналогичны настройкам картинки

Где найти и как использовать готовые шаблоны с таймером

Упростить процесс создания письма с таймером помогут готовые шаблоны. Чтобы найти шаблоны с таймером, нажмите «Создать рассылку» и на шаге «Создание письма» выберите категорию «Ecommerce».

Выберите один из 5 шаблонов и нажмите «Использовать».

Шаблон откроется в конструкторе UniSender. Чтобы настроить таймер, нажмите на блок с таймером, а затем на кнопку «Configure» в свойствах блока.

Настройте дату события, от которого идет отсчет, и внешний вид таймера, нажмите «Сохранить».

Далее замените текст, картинки и ссылки в шаблоне на свои, и письмо с таймером готово, можно отправлять рассылку.

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

Зачем в рассылке таймер обратного отсчета
Создает чувство срочности
Призывает к немедленному действию
Привлекает внимание
MotionMail
Sendtric
Niftyimages
proTimer
Как вставить таймер обратного отсчета в SendPulse

Зачем в рассылке таймер обратного отсчета

Создает чувство срочности

Таймер, секунды которого стремительно тикают в обратном направлении, создает чувство срочности и ощущение дефицита времени.

Призывает к немедленному действию

Подписчик понимает, что время действия предложения ограничено. Это стимулирует действовать немедля, а не отложить на потом и забыть.

Привлекает внимание

Цифры на счетчике меняются в непрерывном режиме — динамическое действие на фоне статичного контента письма цепляет глаз.

Чтобы не осталось сомнений: Selligent и Lynda провели исследование . Выяснилось, что рассылка с таймером приносит 10-процентное увеличение конверсий и 33-процентний рост переходов по сравнению с обычным письмом.

Мы создадим таймер, который будет считать оставшееся время до Нового года. Так что задаем одну и ту же дату окончания события — 31 декабря.

MotionMail

В сервисе доступно 4 тарифа:

Free — полностью бесплатный;
Bootstrap подходит для маленьких компаний и стоит $10 в месяц;
Startup с платой $60 в месяц для начинающих предпринимателей,
Enterprise за $200 в месяц — вариант для крупного бизнеса.

В бесплатном тарифе предусмотрено 20 000 кредитов в месяц. Один кредит — один просмотр созданного счетчика. Как только пользователь открывает письмо с таймером — минус кредит. Если один и тот же пользователь открывает письмо, скажем, 5 раз, — минус 5 кредитов со счета. Как оказалось, превью письма с таймером в сервисе рассылок, тоже считается просмотром.

Если у вас остались неиспользованные кредиты за месяц, в тарифе Free и Bootstrap они сгорят, а в тарифах Startup и Enterprise перейдут на следующий месяц. Если кредиты закончились, предусмотрена дополнительная плата за просмотры свыше установленного максимума. Но эта функция доступна только на платных тарифах. Цена за один просмотр варьируется от $0.0001 до $0.000085.

В бесплатной версии под таймером отображается водяной знак компании, но фон и надписи можно подобрать так, что копирайт станет еле заметным. В платном тарифе водяной знак отключается.

Пользователь бесплатного тарифа может установить только один язык таймера для всего списка рассылки. В платных тарифах язык меняется автоматически в зависимости от языка браузера получателя — вы выбираете язык по умолчанию, а остальное делает система.

Интерфейс удобный и понятный, но доступен только на английском языке. Есть 4 разных дизайна. Для таймера можно задать фон, изменить цвет и размер шрифта. Код можно редактировать. Доступен предварительный просмотр таймера, который вы создали.

Чтобы сгенерировать таймер в этом сервисе, глубоких технических знаний не требуется. Достаточно прописать параметры и вставить полученный код в шаблон письма. Респонсивности можно добиться с помощью атрибута со стилевыми свойствами: style=”width:100%; height:auto;” .

Понравившийся вариант счетчика отображается в плохом качестве: отчетливо видны все пиксели вне зависимости от размера. Особенно это заметно, когда вставляешь код в шаблон письма. Попытка узнать, связано ли это с бесплатным тарифом, или неправильными настройками, не принесла результатов. В FAQ ответа на этот вопрос нет, а блог компания не ведет.

Мы попробовали другой вариант оформления и получили таймер в нормальном качестве.

Sendtric

Сервис специализируется на таймерах обратного отсчета. Плюс в том, что он абсолютно бесплатный. Единственный доступный язык интерфейса — английский, но это не сказывается на простоте в использовании. Все настройки интуитивные и понятные.

Регистрироваться не нужно. Достаточно ввести email, выбрать часовой пояс, затем дату и время события, до которого таймер будет отсчитывать время. Счетчик устанавливается не более чем на 30 дней. Он работает 60-90 секунд, а затем возвращается к началу цикла — времени, которое отображалось при открытии письма. Если подписчик откроет email повторно, таймер снова будет отображать точное время до заданного события.

Вариантов дизайна нет, но есть возможность выбрать цвет фона, текста и самого таймера. Нажимаем кнопку «Generate» и получаем код.

Редактировать код на сайте нельзя, поэтому копируем его в буфер обмена и вставляем в нужный блок шаблона письма. Не забываем про атрибут style с соответствующими значениями width и height, чтобы размер таймера менялся автоматически. Что примечательно — водяной знак под счетчиком отсутствует.

Niftyimages

Сервис предназначен для создания персонализированных изображений, таймеров обратного отсчета и ленты социальных сетей в реальном времени для email кампаний. Есть FAQ для каждой категории услуг, компания ведет блог.

В сервисе доступны следующие тарифы:

Первое, что стоит отметить, сервис отнимает просмотры по факту — если получатель увидел таймер, а не просто открыл email. Интерфейс англоязычный, русского адаптированного перевода нет. В пробной версии доступно 6 разных дизайнов.

Настройки удобные. В панели слева сначала выбираем базовые параметры: устанавливаем дату события и время, задаем часовой пояс. После этого настраиваем шрифты. Вариантов много. Указываем нужный размер, цвет шрифта и фона. Цвет надписей и цифр тоже меняется. В конце выбираем язык таймера и при необходимости загружаем собственный фон.

В конструкторе можно посмотреть, как будет выглядеть таймер. На нем нет водяного знака компании.

Мы обратили внимание, что дни, минуты и секунды указаны в родительном падеже, а часы — в именительном. Поэтому, чтобы избежать разнобоя в склонении, надписи под цифрам лучше убрать.

Теги, значения и атрибуты кода на сайте редактировать нельзя. Поэтому копируем его, вписываем нужные значения и вставляем конечный вариант кода в шаблон письма.

proTimer

Русскоязычный сервис. Чтобы попробовать демо версию, нужно указать имя и электронную почту. Через несколько секунд на почту приходит ссылка на публичный аккаунт в сервисе proTimer, где вы можете самостоятельно протестировать функционал платформы и разобраться, как добавить таймер в рассылку. В догонку приходит письмо от разработчика о том, что счетчик, созданный в демо версии, удаляется спустя 2 часа.

Сервис предоставляет два тарифных плана:

Эконом: за 48 рублей пользователь получает 1 таймер в месяц. Сколько таймеров используете — столько раз по 48 рублей и заплатите. В тарифе доступно 15 вариантов дизайна.
Безлимитный: за 199 рублей в месяц. Единственное отличие от эконом-тарифа — неограниченное количество таймеров. За указанную сумму вы можете использовать хоть 2 таймера, хоть 20.

Дизайн интерфейса выглядит просто, язык не меняется. Перед началом работы проводится короткий инструктаж-демонстрация, но разобраться в главном меню все равно сложно.

Во вкладке «Как считать» указываем дату завершения акции и выбираем время.

Переходим к следующей вкладке — «Как отображать». Выбираем подходящий дизайн, устанавливаем размер и цвет фона. Изменение шрифта не предусмотрено. Ненужные цифровые части таймера можно отключить вместе с надписями.

Предварительный просмотр результата отображается в каждой вкладке. В блоке «Как отображать» достаточно много настроек. Превью не помещается в окне и таймер пропадает из поля зрения. Чтобы увидеть, как меняется счетчик, приходится каждый раз прокруткой спускаться вниз страницы. Это не очень удобно.

В последней вкладке, «Настройки для писем», нужно выбрать, что будет отображаться, когда срок действия акции закончится. Есть 5 предложенных сервисом вариантов и возможность вставить URL своей картинки в формате PNG.

На последнем этапе можно выбрать, какого цвета будет фон под таймером. Палитры на цветовом круге нет, так что пришлось просить у Google таблицу названия цветов, чтобы выбрать шестнадцатеричный код подходящего цвета. Еще один минус в удобстве использования.

Когда все параметры указаны, нажимаем кнопку «Вставить таймер в письмо». Платформа начинает генерировать таймер. В нашем случае, процесс занял по меньшей мере 10 минут. Это долго по сравнению с другими сервисами, которые выдают результат моментально. Код, который мы получили, оказался очень громоздким. Стоит отметить, что он вставляется в исходный код письма, а не в визуальный редактор.

Цифры по итогу сбились — вместо положенных 27 дней до 31 декабря отображается 1 день.

Как вставить таймер обратного отсчета в SendPulse

Исходя из плюсов и минусов каждого сервиса, мы остановились на Niftyimages. Таймер, созданный с помощью этой платформы, мы и будем вставлять в шаблон письма SendPulse .

Как видите, создать таймер не сложно, так что выбирайте подходящий сервис и добавляйте срочность в рассылки вместе с SendPulse !

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.

Таймеры обратного отсчёта могут использоваться на сайтах для различных целей. Но в большинстве случаев они применяются для отображения времени, которое осталось до наступления какого-то крупного события: запуска нового продукта, рекламной акции, начала распродажи и т.д.

Демо таймера обратного отсчёта

Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).

Подключение и настройка таймера

1. Вставить в нужное место страницы html-разметку таймера:

Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе . Первый класс ( timer__item ) используется для стилизации элемента, а второй - для таргетинга в JavaScript.

2. Добавить стили (базовое оформление):

Стилизовать таймер обратного отсчета можно так как вы этого хотите.

Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.

3. Добавить JavaScript:

4. Установить дату окончания. Например, до 1 июля 2021:

Структура кода JavaScript

Основную часть кода занимает функция countdownTimer :

Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.

Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:

Вычисление оставшегося количества дней, часов, минут и секунд выполняется следующим образом:

Встроенная функция Math.floor используется для округления числа до ближайшего целого (посредством отбрасывания дробной части).

Вывод оставшегося времени на страницу:

Переменные $days , $hours , $minutes , $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.

Изменение содержимого элементов выполняется через textContent . Если значение меньше 10, то к нему добавляется символ «0».

Получение элементов (выполняется с помощью querySelector ):

Функция declensionNum используется для склонения числительных:

Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval .

Хранение идентификатора таймера осуществляется в переменной timerId :

Использование setInterval для запуска функции countdownTimer каждую секунду:

Остановка таймера по истечении времени выполняется в функции countdownTimer :

Скрипт для создания нескольких таймеров отчета на странице

Скрипт, написанный с использованием классов, который можно использовать для создания нескольких таймеров отчета на странице:

Пример использования класса CountdownTimer() для создания таймера на странице:

В new CountdownTimer() необходимо передать следующие аргументы:

конечную дату в формате Date;
функцию, которую нужно выполнять каждую секунду (её, например, можно использовать для обновления содержимого элементов, которые используются для отображения оставшегося времени);
при необходимости функцию, которую нужно выполнить после завершения таймера.

HTML код первого таймера:

Инициализация остальных таймеров на странице с помощью new CountdownTimer() выполняется аналогично.

Пример страницы, на которой имеется несколько таймеров обратного отсчёта:

В статье рассказывается, как создать таймер на сайт, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:

Основные функции таймера:

Отображение оставшегося времени.
Преобразование времени в формат MM:SS.
Изменение цвета, когда оставшееся время приближается к нулю.
Отображение оставшегося времени в виде анимированного кольца.

Шаг 1. Начните с базовой разметки и стилей

Далее используем CSS, чтобы:

Установить размер таймера обратного отсчета.
Удалить заливку и обводку из элемента круга.
Установить ширину и цвет кольца.

В результате мы получили шаблон, который выглядит следующим образом.

Шаг 2. Настройка временной метки

HTML-код содержит пустой элемент для отображения оставшегося время. Мы добавим сюда соответствующее значение в формате MM:SS с помощью метода formatTimeLeft.

После этого мы используем только что созданный метод в шаблоне.

Чтобы вывести значение внутри кольца, нужно обновить стили.

Теперь заставим таймер отсчитывать от 20 до 0.

Шаг 3: Обратный отсчет

У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.

Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:

Устанавливать интервал счетчика.
Увеличивать значение timePassed каждую секунду.
Пересчитывать значение timeLeft.
Обновлять значение метки в шаблоне.

Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.

У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.

Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.

Шаг 4: Перекрываем кольцо таймера другим кольцом

Чтобы визуализировать отсчет времени, добавим к кольцу второй слой, который будет обрабатывать анимацию. Для этого расположим новое зеленое кольцо поверх оригинального, чтобы получился своего рода индикатор выполнения.

Сначала добавим элемент path в SVG.

После этого добавим несколько стилей, чтобы круговая траектория выглядела как оригинальное серое кольцо. Важно, чтобы свойство stroke-width принимало значение, равное размеру исходного кольца. А также чтобы длительность transition была установлена на 1 секунду.

Но кольцо таймера пока не анимируется.

Для анимации линии оставшегося времени мы будем использовать свойство stroke-dasharray.

Шаг 5. Анимация кольца прогресса

Посмотрим, как будет выглядеть кольцо с различными значениями stroke-dasharray.

Свойство stroke-dasharray делит оставшееся кольцо времени на отрезки равной длины. Это происходит, когда мы задаем stroke-dasharray число от 0 до 9.

Посмотрим, как это свойство будет себя вести, если передать ему два значения: 10 и 30.

stroke-dasharray: 10 30

Это устанавливает длину первой секции (оставшегося времени) на 10, а второй секции (прошедшего времени) – на 30. Мы можем использовать это в нашем таймере обратного отсчета.

Нужно, чтобы кольцо покрыло всю окружность. То есть, оставшееся время равно длине окружности кольца.

Вычислить длину дуги можно по следующей формуле:

Это значение используется при первоначальном наложении кольца.

stroke-dasharray: 283 283

Первое значение в массиве – это оставшееся время, а второе – прошедшее. Теперь нам нужно манипулировать первым значением. Вот что произойдет, когда изменяется первое значение.

Создадим метод для подсчета оставшейся доли начального времени. Еще один – для вычисления значения stroke-dasharray и обновление элемента , представляющего оставшееся время.

Также необходимо обновлять контур каждую секунду. Для этого вызовем метод setCircleDasharray внутри timerInterval.

Но анимация отстает на 1 секунду. Когда мы достигаем 0, все еще виден кусочек кольца.

Эту проблему можно решить, постепенно уменьшая длину кольца во время обратного отсчета в методе calculateTimeFraction.

Шаг 6: Изменение цвета в определенные моменты времени

Сначала добавим два порога, которые будут указывать, когда нужно добавить цвета для каждого из состояний. Начинаем с зеленого, затем переходим к оранжевому (в качестве предупреждения), а затем к красному, когда время почти истекло.

Теперь создадим метод, который будет отвечать за проверку превышения установленного порога и изменение цвета.

Мы удаляем один класс CSS, когда таймер обратного отсчета достигает определенной точки, и добавляем вместо него другой. Объявим эти классы.

Все готово. Ниже приводится полная демо-версия:

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, лайки, подписки, отклики, дизлайки низкий вам поклон!

Когда вы создаете страницу, посвящённую какому-нибудь событию, часто нужно отобразить оставшееся время до его наступления. В этой статье рассматриваются счетчики обратного отсчета на сайт, созданные на основе jQuery и CSS.

Soon Countdown

Устанавливается по принципу «подключил и забыл». Используя визуальный редактор, вы сможете создавать потрясающие счётчики обратного отсчёта для сайта. Выбирайте одну из 15 стандартных настроек или создайте свой уникальный таймер.

flipclockjs

Это расширяемый API для создания часов или таймера обратного отсчёта с эффектом переворота. К нему можно применять темы, используя чистый CSS. Библиотека поддерживает jQuery 1.7+ и prefixfree.js (для анимации).

jQuery Countdown

jQuery- плагин, который позволяет установить таймер обратного отсчета в элемент span или div.

TimeTo

jQuery- плагин, который позволяет добавлять на веб-страницу таймер обратного отсчёта или цифровые часы. По умолчанию плагин TimeTo добавляет часы, отображающие текущее системное время. Но при этом он предоставляет большое количество настроек. Например, можно установить задержку на определённую дату и время. А также изменить размер текста, шрифт, язык, цветовую тему и т.д. Вы также сможете добавлять заголовки, отображать дни и устанавливать функцию, которая сработает по истечению заданного промежутка времени.

jQuery Countdown Timer

Обратный отсчёт формирует «ощущение» срочности, а в сочетании с полем для ввода email-адреса приводит к большему количеству подписок. Этот таймер покажет оставшиеся дни, часы, минуты и секунды до предстоящего события. Он использует анимацию для обновления каждую секунду. Заметьте, что плагин доступен только на Github.

Countdown timer on jQuery Canvas

jCountdown

Настраиваемый jQuery- плагин, который вы сможете использовать на сайте. Попробуйте различные настройки на странице предварительного просмотра.

jquery-countdown

jQuery Countdown – это плагин, который не оставит вас равнодушным.

Free jQuery Count Down Plugin: County

Бесплатный плагин для запуска таймера обратного отсчёта, созданный на основе jQuery и загружаемый с различными вариантами настройки. Он позволяет изменять анимацию, цветовую схему и другие параметры.

CSS Flip-Counter

Из-за отсутствия в этом плагине изображений цифр для таймера вам придётся мириться с различным отображением текста и эффектами трансформации в разных браузерах. То, что хорошо работает в Google Chrome для Mac, имеет проблемы с выравниванием в Google Chrome для Windows.

CSS3 Countdown

countdown clock

Часы обратного отсчёта, созданные на CSS. Срок отсчёта – 1 час. Этот таймер показывает минуты, секунды и сотые доли секунды.

Circular minimal countdown

Лёгкий плагин для отображения простых таймеров в виде анимированных круговых диаграмм, оптимизированных под Retina-экраны.

Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

Читайте также: