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

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

Пока искала, наткнулась на три неплохих онлайн инструмента, и решила о них рассказать. Возможно, они вам тоже пригодятся в работе. ;-)

Смотрите мой видеобзор данных сервисов. В видео я также показываю, как установить таймер на сайт:

Итак, первый сервис, где можно быстренько сделать симпатичный таймер — e-timer.ru.

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

таймер обратного отсчета для сайта e-timer

Собственно, весь процесс сводится к настройкам под себя. В основных настройках указываем, подключена ли на сайте библиотека jquery. Проверить можно, заглянув в исходный код сайта (ctrl+u), далее нажать для поиска ctrl+f.

проверить подключение jquery

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

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

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

В настройках отображения таймера можем редактировать его внешний вид:

• менять шрифт и цвет надписей;
• разделители между цифрами;
• язык надписей (доступен русский, украинский, английский);
• внутренний отступ и цвет фона;
• границы и тень.

Тут можно играться по-разному и сразу смотреть на результат.

настройки отображения таймера e-timer

В настройках отображения цифр можем выбирать:

• наименьшее значение – если выберем «минуты», тогда секунды отображаться уже не будут;
• шрифт, размер и цвет цифр;
• внутренний отступ – при его увеличении счетчик растягивается в длину.
• границы – когда увеличиваем, скругляются углы квадратиков, окружающих цифры.
• и тень – если тут поставим 0, то полностью уберем квадратики вокруг цифр.

настройки отображения цифр на таймере обратногоотсчета e-timer (1)

Когда все настройки сделаны, копируем код таймера и вставляем в нужное место на сайте.

Я покажу на примере простого html-лендинга, который открыла для редактирования в блокноте notepad++. Таймер я хочу поставить прямо под кнопкой оплаты, поэтому нахожу это место в коде, размещаю скрипт, и выравниваю таймер по центру при помощи тегов <center>. Вот так:

нажмите, чтобы увеличить

вставляем таймер обратного отсчета на сайт

А на лендинге мой таймер выглядит так:

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

Следующий онлайн сервис megatimer.ru. Мне он больше пришелся по душе, хоть там и меньше возможностей по внешней настройке таймера.

Итак, в верхней части видим, как будет отображаться счетчик, а чуть ниже – вкладки с настройками.

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

«Тип таймера» – здесь настраиваем принцип его работы. Если до определенной даты, то указываем конец отсчета (по локальному времени пользователя или по Москве, к примеру).

настраиваем таймер до определенной даты

Если на промежуток времени, то можем установить таймер на 24 часа для каждого нового посетителя. Тогда выбираем начало отсчета с первого посещения клиентом и указываем длительность – 24 часа. При этом в правом верхнем углу снимаем галочку с «Дни», оставив на таймере только часы, минуты и секунды.

настраиваем таймер обратного отсчета на 24 часа

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

Есть еще цикличный таймер, который может перезапускаться ежедневно с определенной периодичностью.

«Дизайн» — из предложенных вариантов можем выбрать внешний вид нашего таймера. Выбор невелик, но есть несколько универсальных вариантов.

выбираем дизайн таймера megataimer

«Настройки» — на этом этапе у нас есть возможность изменить шрифт, размер и цвет цифр, отступ между ними, разделитель, а также шрифт, размер и цвет надписей.

настройки внешнего вида таймера megataimer

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

копируем скрипт таймера megatimer

И последний сервис, на котором сегодня хочу остановиться — timegenerator (ЭТОТ СЕРВИС БОЛЬШЕ НЕ РАБОТАЕТ!). Позволяет в считанные секунды сгенерировать таймер, так как настроек здесь минимум.

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

выбор таймера обратного отсчета на timegenerator

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

Указываем дату окончания отсчета.

создание счетчика обратного отсчета

Жмем по кнопочке «Создать счетчик», копируем код и вставляем на свой сайт.

копируем код таймера и вставляем на свой сайт

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

Спасибо за внимание! Как всегда рада вашим комментариям. :yes:

С уважением, Виктория