Создать обратный отсчет времени. Бесплатные онлайн-генераторы таймера обратного отсчета

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

А ещё этот метод понадобится вам, если вы будете копировать продающею страницу партнёрского продукта. Это не просто копия партнёрского сайта во фрейме, — это полноценная копия, где Вы можете настроить и отслеживать подробную статистику.

Но, вот только если на партнёрских страницах стоят подобные счётчики, то они работать не будут. Потому, как помимо копирования html кода, css стилей и картинок, — нужно ещё и скрипты скопировать, а это не всегда удаётся сделать.

И поэтому этот метод позволит вам использовать таймер обратного отсчёта для любых целей.

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

Таймер обратного отсчёта на основе JavaScript

Этот метод хоть и требует определённого знания хотя бы HTMLи CSS, зато имеет максимум возможностей для настройки. Изменяя код htmlи настраивая стили css, можно легко подогнать данный счётчик под любой дизайн.

Скопируйте архив с моего Яндекс.Диска и распакуйте архив на своём компьютере. Скачать архив .

В архиве у вас будет 4 файла:

counter.html – собственно html каркас счётчика

jquery.downCount.js – скрипт обратного отсчёта

style.css – стили оформления

time.png – изображения для счётчика

Все необходимые изменения вы будете делать именно в этих файлах.

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

Установка даты осуществляется в файле counter.html . Необходимо просто изменить дату и время. Все необходимые подсказки в файле присутствуют.

Теперь необходимо скопировать всю папку с этими файлами на ваш сервер. Делайте это любым удобным для вас способом. Если у вас блог под управлением WordPress, загрузите папку в папку Вашей темы:

Http://vashdomen.ru /wp-content/themes/vashatema /counter

В том месте, где необходимо отобразить таймер обратного отсчёта, нужно вставить вот такой код:

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

Так будет выглядеть таймер:

А вот и видеоурок «Как вставить таймер обратного отсчёта на сайт»

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

На мой взгляд, самый простой но, тем не менее, очень удобный сервис по созданию таймеров обратного отсчёта является TimeGenerator .

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

Копируете полученный код в буфер обмена (CTRL+C).

И завершающий этап, вставляете это код (CTRL+V) в нужном месте вашего шаблона. Опять же, делается это через редактор кода.

Пример таймера:

Таймер обратного отсчёта с сервисом proТаймер

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

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

Подписывайтесь на новые статьи!

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

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

01. Анимированный счетчик на javascript

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

Сайт-источник : http://codecanyon.net/item/javascript-animated-counter/233648
Предпросмотр : http://codecanyon.net/item/javascript-animated-counter/full_screen_preview/233648

02. Страница «На реконструкции» в стиле параллакс

Страница «На реконструкции» в стиле параллакс позволит вам «украсить» свою страницу «Скоро открытие» динамическим трехмерным облачным небом, на котором будет расположен ваш логотип или графический элемент на ваше усмотрение. Скрипт работает во всех современных браузерах (Chrome, Safari, Opera, Safari, IE9)

03. Страница «На реконструкции» с обратным отсчетом

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

04. Fancy Countdown – jQuery-плагин

Fancy Countdown представляет собой конфигурируемый jQuery-плагин, позволяющий вас создавать привлекательные таймеры обратного отсчета. Он очень прост в использовании. Вы можете указать необходимую дату. Плагин поставляется с расширяемым АПИ, и настройка займет не более 3-х минут. Стоит отметить работоспособность на iPhone, iPad и т.д, а также на смартфонах с поддержкой javascript.

05. jsCountdown

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

06. Целевая страница «Coming Soon»

javascript-счетчик до открытия веб-сайта с 6 разными эффектами + jQuery.

07. Счетчик для сайта на реконструкции

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

08. WordPress-плагин: Coming Soon

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

09. Виджет Broadcast Countdown

Данный виджет включает в себя настройку двух режимов: повторяющегося и единовременного. Здесь можно выставить текстовый заголовок обратного отсчета, потоковый URL, а также опцию для настройки таймера на обратный отсчет до единовременного события. Стоит отметить наличие выбора даты и времени на jQuery, что значительно облегчает процесс.

10. WordPress-сайт в разработке или не отвечает по техническим причинам

Плагин DP Maintenance включает возможность добавить режим закрытия сайта на разработку или на время технических работ. Стоит отметить, что плагин представляет на выбор 3 адаптивных шаблона.

11. 5sec Maintenance Mode

Плагин предлагает 6 забавных шаблонов с оформляемым обратным отсчетом. Все шаблоны оптимизированы под поисковые системы и Google.

12. Плагин jQuery Countdown

Плагин очень просто встроить с возможностью останавливать его и запускать вновь.

13. jQuery-countdown

Данный обратный отсчет оформлен красивой анимацией. Проект пока что находится в стадии бета.

Вконтакте

Помните таймеры «до Нового Года осталось _ дней _ часов _ минут»? Сегодня таймер обратного отсчета транформировался в отличный маркетинговый инструмент — счетчики стоят на целевых страницах интернет-магазинов, на продающих страницах или лендинг-пейдж. «До окончания акции осталось — 5 дней, 15 часов, 40 минут» или «До начала распродажи осталось 7 часов, 15 минут, 35 секунд». Безусловно, таймеры «подогревают» интерес посетителя, побуждают его к совершению целевого действия на сайте, ограничивая время и создавая эффект срочности или дефицита товара.

Если ваши акции разовые или нет технической возможности установки собственных скриптов — существуют бесплатные онлайн-генераторы, которые в два-три клика подготовят работоспособные таймеры обратного отсчета.

E-timer

Различные варианты настройки и оформления. Объем кода — маленький. Работа скрипта на стороне сервиса.

Три варианта таймера. Без настроек оформления (только через стили CSS). Объем кода — большой (скрипт + стили + код HTML). Работа скрипта на стороне пользователя.

Генератор флеш-таймера

Без поддержки jQuery — таймер сделан на flash . Несколько вариантов оформления. Объем кода — средний. Работа счетчика на стороне сервиса.

jQuery генератор даты обратного отсчёта

Без оформления. Объем кода — большой. Работа скрипта на стороне пользователя.

Пример работы:

До 100-летия осталось.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Вот так:

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

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

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

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

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

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

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

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

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

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

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

И последний сервис, на котором сегодня хочу остановиться – timegenerator.ru . Позволяет в считанные секунды сгенерировать таймер, так как настроек здесь минимум.

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

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

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

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

Программа понравится тем, кто любит наслаждаться временем ожидания. Основная функция приложения TimeLeft это отсчет времени. Среди инструментов утилиты пользователь найдет таймер обратного отсчета, часы, секундомер, напоминатель и создание виртуальных стикеров, позволяющих создавать заметки на рабочем столе. Применение возможностей в комплексе позволяет создать напоминание с таймером, разместить его в любом удобном месте на рабочем столе, запланировать при наступлении события запуск внешнего приложения, установить таймер выключения компьютера, осуществить переход по ссылке или запустить выполнение скрипта. Установите таймер на рабочий стол и программа оживит течение времени ожидаемого момента и. Когда подойдет время торжественного события, когда таймер досчитает до ноля и сработает, TimeLeft уведомит и обратит на это внимание пользователя выводом на экран сообщения, сопровождаемое звуковой сигнализацией.

Таймер отсчета времени

TimeLeft легко применим для любых повседневных задач дома и на работе. Утилита имеет большое количество настроек и дополнительных опций. Среди них такие как: настройки автозагрузки, прозрачности, плавающих окон и окон сообщения, интеграция кнопки быстрого добавления в браузер, поведение трей-иконки TimeLeft, назначение горячих клавиш, расписание рабочих дней, праздников и другие. Для красивого и стильного отображения отсчета времени в программе имеется большой выбор тем оформления для таймера, скины позволяют настроить внешний вид TimeLeft на свой вкус. К таймеру или секундомеру можно применить визуальный эффект, задать стиль, применяемый для смены цифр: вертикальный и горизонтальный слайдер, плавное затухание одной и проявление другой цифры, имитация механического счетчика и другие.

Скриншоты программы TimeLeft

Бесплатная версия TimeLeft и TimeLeft Deluxe

Бесплатная версия имеет ограничения: в бесплатной программе можно создавать не более одного инструмента, то есть одновременно можно создать напоминатель, таймер, часы, стикер и секундомер, но каждый в единственном экземпляре. Платная версия TimeLeft Deluxe позволяет подключить для отслеживания интернет-аукцион, выполнить экспорт таймера в java скрипт, который можно разместить на веб странице, синхронизировать точное время через интернет и снять ограничения на количество одновременно используемых инструментов программы.

Официальный сайт: http://www.nestersoft.com/timeleft/
Операционные системы: Windows All
Поддерживаемые языки: Мультиязычная платформа, включая русский
Версия: 3.62
Лицензия: freeware (бесплатная )

Размер файла 2,36 Мб