Загрузка...Зациклить счетчик обратного отсчета
Таймер обратного отсчета на сайт
Всем привет!
Сегодня поговорим о том, зачем вебмастеру может понадобиться таймер на сайт и рассмотрим несколько простых вариантов реализации подобной функции в WordPress: таймер обратного отсчета в виде интегрируемого в страницу скрипта и на основе бесплатных плагинов. Предлагаемые в статье решения подойдут как новичкам, так и опытным блогерам.
Где взять таймер обратного отсчета на сайт бесплатно и платно?
Здравствуйте! Где взять таймер обратного отсчета на сайт бесплатно и платно?
Недавно здесь на блоге была опубликована моя статья об использовании таймера при работе за компьютером. И на эту статью пошли посетители, которые ищут таймер на свой сайт. Поэтому сегодня пишу статью именно о том, где взять и как поставить таймер обратного отсчета на сайт.
В принципе, этот вопрос для меня давно решен. Решен в пользу протаймера от Юджина Боса. Но решение пришло не само по себе и не сразу. Был период проб и ошибок.
Моя работа с таймерами обратного отсчета началась в сентябре 2014 года, когда я осваивала программу Adobe Muse. Для сайтов, созданных в этой программе, у меня то ли 5, то ли 6 различных виджетов такого таймера. Различных по виду, настраиваемых, зацикливаемых. Работают нормально. Даже несколько на одной странице.
Возможно, их можно поставить на сайты, созданные иными способами. Не пробовала.
Когда стала использовать другие возможности создания подписных и продающих страниц, например, OptimizePress, стала искать другие таймеры. Их оказалось достаточно много, бесплатных и платных.
Начну с бесплатных. Именно бесплатные таймеры ищут люди через поиск.
Из бесплатных в первую очередь назову таймер обратного отсчета от МеgaTimer. Познакомилась с ним я по рекомендации Владимира Гынгазова. Он ставит его на сайты, которые делает на заказ.
Это бесплатный счетчик с функциями отложенного запуска и зацикливания. Он может обнуляться автоматически каждый день.
Настраивается этот таймер очень гибко. Можно изменять тип и форму счетчика, его размер, шрифт. Время можно выставить с учетом локального времени пользователя, то есть с учетом его часового пояса.
Есть счетчики до определенной даты. Есть – на определенный промежуток времени («у вас 15 минут, чтобы получить скидку 70%»). Начинаться отсчет может сразу в момент установки счетчика или с момента первого посещения сайта клиентом. Зацикленный таймер может перезапускаться в нужное время с определенной периодичностью, например, при перезапуске акций на популярные товары («успейте купить сегодня по акции со скидкой»).
Устанавливается счетчик просто. Html-код счетчика генерируется на сервисе МеgaTimer и просто вставляется на сайт.
Как это делается, не рассказываю и не показываю. Это все объясняется в нескольких строках на самом сайте МеgaTimer.
Назову аналогичные варианты счетчиков. Это таймеры обратного отсчета от сервисов Timegenerator и E-timer. Но они менее функциональные и надежные, чем, МеgaTimer.
Посмотрела в сети отзывы о них. Есть хорошие. Но много и отрицательных фактов приводят пользователи. То проблемы с установкой, то не отображаются, то останавливаются, то еще какие косяки появляются. Если же, например, вас интересует таймер на скидку, то Timegenerator – не лучшее решение, так как его придется по завершению переделывать вручную.
Кроме того, ни в одном из бесплатных таймеров я не нашла главного, чего искала. А именно возможности по завершении работы таймера перебросить посетителя на другую страницу с другими условиями покупки.
Так и хочется сказать: бесплатный сыр – в мышеловке. Все-таки лучшее решение – proТаймер от сервиса makedreamprofits.ru. У него есть все: и возможность переадресации, и циклический перезапуск, и отслеживание по куки-файлам и браузерам, и настройка по часовым поясам. Для акций, скидок, ограниченных предложений – это идеальное решение.
На сегодняшний день – 15 вариантов дизайна.
Есть возможность настроить размер и цветовую гамму по своему усмотрению. Поддерживает все основные сервисы рассылок. Легко устанавливается и настраивается под сайт.
Большинство счетчиков, начинающих отсчет на определенное время после посещения страницы, учитывают только куки для защиты от сброса. То есть, чтобы сбросить таймер, можно просто зайти на сайт со счетчиком с другого браузера или с телефона. У проТаймера же осуществляется максимальная защита от сброса «вечнозеленых» акций по куки, по IP и по email.
И самое главное – простота изменения настроек счетчика непосредственно в личном кабинете на сайте makedreamprofits.ru или на самой странице, где установлен счетчик, безотказная работа и железная техническая поддержка.
Вот так выглядит proТаймер на одной из моих страниц (посмотреть можно здесь). В уголке – панелька настройки таймера прямо на странице, без захода в личный кабинет makedreamprofits.ru. Эта панелька видна только админу сайта и никому больше.
Минус только один. Нужно платить. Но из всех своих прожитых лет я вынесла вывод: за все в жизни нужно или платить, или расплачиваться. Третьего не дано.
Могу сказать, что цена более чем доступная в сравнении с пользой, которую получаешь от счетчика. Посмотрите цену здесь. Есть несколько часов бесплатного тестирования, чтобы убедиться, что покупаешь не кота в мешке.
Думайте сами, решайте сами, иметь или не иметь вам таймер обратного отсчета на своем сайте. А если иметь, то какой именно. Моя рекомендация однозначна: иметь нужно, причем, proТаймер от Юджина Боса (можно заказать здесь). Это оптимальное решение.
На этом все, что я могу сказать по этому поводу. Если о чем-то забыла, спросите в комментариях. Отвечу обязательно.
Расскажите о proТаймере друзьям в социальных сетях, нажав на кнопочки ниже.
Счётчик обратного отсчёта времени с перезапуском
Итак, счетчик обратного отсчета времени, который будет перезапускаться по истечении суток. Разработал его один умелец у которого блог mywpnote.ru. Наткнулся на блог около полугода назад, и он очень выручил меня в то время. Сегодня же хочу рассказать вам об одном из счетчиков, которые он разработал и описать, как его подключать.
Внешний вид таймеров такой:
Скачивайте исходники и в архиве вы увидите 4 папки с названиями vid1, vid2, vid3, vid4 – в них разные типы оформления таймеров. Вы можете посмотреть все и выбрать понравившийся. Способ подключения у всех одинаковый.
Я буду показывать на 4, так как он, как мне кажется, наиболее универсален. Открываем vid4 и пред нами стандартный набор папок для большинства исходников в сети. (индексный файл, папка с таблицами стилей, папка с картинками, и папка со скриптом). Я немного изменил структуру файлов — для того, чтобы новичкам было проще подключать счетчик. То есть я вынес скрипт таймера в отдельный файл, а раньше он был в индексном.
Как подключить скрипт счетчика обратного отсчета на свою landing page?
Открываем index.html– любым редактором (я пользуюсь sublime3) и видим следующий код.
Отсюда нужно скопировать в свой проект подключение таблицы стилей и скрипта (7 и 8 строка).
А также, в месте, на котором вы хотели бы разместить таймер, необходимо прописать тег div с классом “countbox” – 13 строка. В коде специально размещено несколько подключений таймеров, чтобы дать понять, что их можно использовать несколько раз на странице. У многих скриптов с этим проблемы, и второй раз они не хотят выводиться на экране.
Теперь необходимо просто скопировать папки img, css и js, а также их содержимое в свой проект — и все! Счетчик обратного отсчета будет работать! Как видите, это занимает максимум 5 минут, и такой важный элемент будет присутствовать у вас на сайте. Если возникнут вопросы — пишите в комментариях, я обязательно помогу подключить счетчик!
Счетчик обратного отсчета онлайн
Для тех, кому необходим другой тип счетчика обратного отсчета, о котором говорилось в начале статьи, существует сервис с простым до безобразия способом подключения. Все что вам нужно сделать — это зайти на сайт www.timegenerator.ru и выбрать один из предложенных таймеров.
Нужно срочно измерить время, под рукой нет специального устройства, а использовать обычные часы или мобильный телефон неудобно? Предлагаем вашему вниманию таймеры онлайн , которые отличаются высокой точностью и удобством в использовании.
Таймеры онлайн незаменимы во время спортивных тренировок, совмещения нескольких дел, когда важно не пропустить время и просто для измерения личных рекордов. Например, вам очень важно узнать, сколько страниц вы прочитаете за определенный промежуток времени, сколько знаков в минуту печатаете или как быстро сможете пройти важный раунд в игре.
Легко установить и настроить под ваш сайт!
Шаги установки
Адаптирован для мобильных
Таймер автоматически подстраивается по ширине вашего сайта.
Не важно на чем ваш сайт
проТаймер будет работать везде. На любой CMS. На любом конструкторе, где можно вставлять свой HTML код.
Мы всегда вам поможем!
Наша техподдержка поможет вам в любых ситуациях, главное не забывайте спрашивать:)
Изменение «на лету»
Как только вы делаете изменения в настройках таймера, после сохранения они сразу отображаются на вашем сайте.
Несколько таймеров на странице
Вы можете вставить один и тот же таймер в страницу столько раз, сколько захотите.
Идеально для длинных продающих страниц!
Изменяйте ссылки и картинки
Хотите чтобы на странице поменялись ссылки на покупку продукта после завершения акции? Легко 🙂
Изменяйте части страницы
Нужно заменить текст или какие то элементы? Это тоже можно. А если вы разбираетесь в HTML, вы можете просто добавить класс к нужным элементам.
Изменяйте страницу
Самый простой способ. Просто создайте отдельную страницу, и она будет показываться после завершения акции
Как работает устройство
Увеличение/уменьшение времени происходит скачкообразно сразу на несколько секунд. Кроме того, время можно приостановить.
Последние 5 минут сигнализируются короткими двойными пиками каждую минуту. А последние 15 секунд пикает каждую секунду.
Возможность выключения текущего сигнала пищалки осуществляется нажатием на энкодер или поворотом его ручки в любую сторону.
С целью максимального упрощения для пользователя управления, таймер обратного отсчета не имеет никаких других лишних функций.
Вид сбоку на детали
Рекомендуется ещё добавить красное пластиковое стекло перед дисплеем, чтобы улучшить видимость цифр.
И вместо распознавания временных шагов на 15, 30, 60 секунд, лучше было бы определить скорость поворота ручки энкодера и на этой основе изменять время. Медленное вращение — подсчитывает отдельные секунды, быстрое — шаги в несколько минут.
Готовый самодельный LED таймер
Корпус… До него дело так и не дошло Таймер уже долгое время так и используется в полуоткрытом виде: снизу 3 пальчиковые батарейки, спереди трёхцифровой индикатор LED, а сверху ручка регулятора выбора времени.
Таймер обратного отсчета на сайт
зачем вебмастеру может понадобиться таймер на сайт и рассмотрим несколько простых вариантов реализации подобной функции в WordPress: таймер обратного отсчета в виде интегрируемого в страницу скрипта и на основе бесплатных плагинов. Предлагаемые в статье решения подойдут как новичкам, так и опытным блогерам. 
Зачем на сайте нужен таймер
В первую очередь, он необходим владельцам сайтов, задумывающимся о проведении акций или создании собственных продающих страниц. Как правило, таймер на сайте отсчитывает время в обратном порядке, наглядно показывая количество дней, часов и минут, оставшихся до окончания акции, раздачи бонусов или распродажи, побуждая посетителя к действию, например, приобретению рекламируемого на странице продукта. Таймеры обратного отсчета давно стали важным элементом Landing Page, создающим эффект срочности и ограниченного предложения товара/услуги.
Не менее популярен и востребован таймер для визуального отсчета времени до важного мероприятия или приближающегося праздника. Размещенный на главной странице, в сайдбаре или шапке сайта, такой счетчик будет уведомлять посетителей о приближающемся событии.
Еще один распространенный вариант использования таймера — на страницах-заглушках сайтов, находящихся в разработке, на реконструкции или техническом обслуживании. В данном случае счетчик показывает время, оставшееся до момента, когда сайт будет доступен для посещения.
Как установить скрипт таймера на сайт
Основные варианты используемых на сайтах таймеров:
- Скрипт в виде набора файлов, отвечающих за функционирование и оформление счетчика. Подразумевается правка кода страницы или файла шаблона сайта вручную. Подходит для администраторов сайтов, работающих с WordPress на уровне кода. Подобное решение предполагает, что перед вставкой таймера будет произведено резервное копирование файлов сайта.
- Онлайн-таймер — скрипт, сгенерированный сторонним сервисом и содержащий обращения к нему. Простой и удобный вариант для быстрого подключения счетчика к сайту на любой CMS. Добавление кода счетчика производится в редакторе страницы вручную.
- Плагин таймера для WordPress. Готовое решение, без необходимости копаться в коде. Плагины обратных таймеров на все случаи жизни имеются в официальном репозитории WordPress. С установкой и настройкой такого плагина, как правило, не возникает трудностей.
Два последних пункта предельно просты в реализации даже для новичков. Рассмотрим подробнее особенности их применения на сайте WordPress.
Онлайн-таймер обратного отсчета
Среди разнообразных генераторов скриптов для отсчета времени можно выделить E-Timer — русскоязычный сервис с многолетней историей, предоставляющий бесплатный онлайн-таймер обратного отсчета для сайта со всеми необходимыми настройками. Сервис заметно упрощает процесс реализации индивидуального варианта счетчика и работу со скриптом таймера, сокращая его до простых и понятных действий:
- установки нужной даты или функции перезапуска;
- настройки внешнего вида всех имеющихся элементов;
- размещения готового кода таймера на своем сайте.
От аналогичных онлайн-сервисов E-timer отличается возможностью гибкой настройки за счет большого количества опций и позволяет генерировать подходящие под любой дизайн уникальные и красивые таймеры.
Основные настройки
Во вкладке основных настроек скрипта задаются следующие параметры:
- подключение к сайту библиотеки JQuery;
- перезапуск счетчика (возможные варианты — раз в день, неделю, месяц);
- дата и время, до которых будет производиться отсчет;
- текст над цифрами и его размер.
Настройки отображения таймера
В этом разделе настроек находятся опции, отвечающие за визуальное отображение основного блока. Здесь можно выбрать один из четырех языков пояснительной надписи (английский, русский, украинский, казахский), ее шрифт и цвет, тип разделителя между цифровыми блоками, задать параметры отступов, границ и тени (числовые значения и цвет).
Настройки отображения цифр
В этой вкладке настроек скрипта таймера присутствует возможность установки наименьшей единицы отсчета (секунды, минуты, часы, дни), определяющей количество блоков. Так как именно динамично изменяющееся значение количества секунд в таймере делает его «живым» и привлекает внимание посетителей, блок секунд используется в подавляющем большинстве счетчиков.
В вашем распоряжении десяток наиболее распространенных гарнитур шрифтов, визуальный выбор цвета шрифта и степени его прозрачности, а также размера шрифта. Цвет фона и отступы в блоке с цифрой также можно подобрать под дизайн страницы, на которой размещен таймер обратного отсчета. Регулировка параметров тени позволяет добавить блокам с цифрами счетчика необходимый объем. Возможность изменять цвет, толщину и радиус закругления границ цифровых блоков — приятная особенность для дополнительной индивидуализации таймера на сайт.
Как добавить код таймера на сайт
Сгенерированный сервисом код отображается в специальном поле в правой части страницы онлайн сервиса, скопировать его оттуда и добавить в нужное место на своей странице не составляет никакого труда. Используется при вставке таймера на сайт html-режим редактора страницы, в этом случае javascript обрабатывается корректно, WordPress выводит работающий счетчик в том виде, какой был задан в настройках онлайн-сервиса.
Главный недостаток использования онлайн-таймеров заключается в привязке скрипта к стороннему сервису, т.е. полная зависимость таймера обратного отсчета от доступности и работоспособности чужого сайта.
Таймер для сайта онлайн — отличный вариант для лендинг пейдж с кратковременными акциями. При необходимости добавления на страницу «вечного», периодически обновляющегося счетчика, имеет смысл для этой цели использовать скрипты, выполняющиеся на собственном сайте.
Плагин-таймер: быстрое решение для WordPress
Для большинства страниц и лендингов, где может понадобиться таймер обратного отсчета, WordPress плагин — вполне достаточное и разумное решение. Поиск из админки по ключевым словам Timer и Countdown в официальном репозитории WordPress выдаст несколько десятков плагинов со схожими возможностями, с основным бесплатным функционалом и дополнительными настройками, доступными при покупке премиум-версии плагина. Рассмотрим несколько популярных плагинов таймера отсчета на сайт.
Evergreen Countdown Time
Простой таймер с понятными настройками на одной странице, без спецэффектов и необычного оформления. В базовой (бесплатной) версии предоставляется возможность выбора:
- даты, до которой ведется отсчет;
- цвета счетчика (черный или белый);
- размера цифр и подписей (в пикселях);
- метода отслеживания посетителей (по cookie или IP-адресу).
С помощью этого плагина на сайте можно создать несколько таймеров обратного отсчета. Добавление выбранного счетчика на страницу производится в визуальном редакторе WordPress с помощью шорткода вида:
Конечный результат в виде простого одноцветного счетчика вряд ли впечатлит требовательного вебмастера, поэтому идем дальше.
Countdown Timer Ultimate
Плагин с гибкими настройками и красивыми визуальными эффектами, что позволяет подстраивать внешний вид таймера под дизайн страницы. Особенности этого плагина:
- Полностью отзывчивый таймер обратного отсчета WordPress.
- Возможность установки размеров таймера и выбора одного из двух типов анимации.
- Возможность скрыть любой из счетчиков (дни, часы, минуты, секунды).
- Возможность изменения ширины, цвета фона и цвета каждого счетчика.
Добавление счетчика на сайт производится с помощью шорткода, который появляется в списке после сохранения настроек и публикации таймера:
[wpcdt-countdown ]
При необходимости можно вставить обратный таймер на сайт в файл шаблона через функцию:
Внешний вид таймера, добавленного на страницу с помощью плагина, будет примерно следующий:
Аналогичного вида таймер можно создать с помощью плагина Countdown Builder, отличительной особенностью которого является наличие предпросмотра внешнего вида счетчиков прямо на странице настроек.
Uji Countdown
Наиболее продвинутый из рассматриваемых плагинов, использующий возможности HTML5. После установки плагина из репозитория в консоли WordPress (меню Настройки) появляется пункт Uji Countdown. Несмотря на англоязычный интерфейс, все настройки интуитивно понятны. Также присутствует блок предпросмотра, при необходимости быстро скорректировать выбранные опции не составляет труда.
Добавление собственного оформления доступно при переходе на вкладку Add new style. Здесь есть все, что может потребоваться при создании красивого и стильного таймера:
Плагин интересен тем, что позволяет задавать разный цвет фона для верхней и нижней части цифрового блока (опция Select Box Color). Приятный бонус — большой выбор начертаний из всего многообразия Google Fonts. Во вкладке Settings имеются поля, в которых можно вручную прописать перевод используемых единиц времени (секунды, минуты, часы и т.д.).
Отредактированный и сохраненный стиль появляется во вкладке My Styles. Здесь можно добавлять, редактировать и удалять стили, что очень удобно.
На панели инструментов в редакторе контента WordPress появляется кнопка в виде циферблата часов, при нажатии на которую в нужном месте страницы легко добавить таймер с выбранным стилем и задать нужное время. Здесь же можно выбрать действие, которое будет совершаться, если время истекло (скрывать цифры или делать редирект на определенный URL). В пункте Recurring Time присутствует возможность перезапуска таймера через определенные отрезки времени, что делает таймер «вечным». Как видим, в бесплатной версии плагина настроек много.
Заключение
Таймер обратного отсчета на сайт можно добавить любым из рассмотренных способов. В большинстве случаев для этого не потребуется специальных знаний и особых навыков, достаточно скопировать в редактор страницы готовый скрипт стороннего онлайн-сервиса или добавить сформированный плагином шорткод.
Если вы используете не рассмотренный в статье скрипт или плагин таймера, позволяющий реализовать на странице красивое решение, предлагаю поделиться им в комментариях.
Таймер обратного отсчета на 0-9999 секунд на PIC12F683
Целью этого проекта является создание простого таймера обратного отсчета на 0-9999 секунд с звуковым сигналом и дисплеем. Необходимое время устанавливается при помощи двух кнопок без фиксации, а отсчет секунд отображается на 4 разрядном семи сегментом дисплее. В проекте используется микроконтроллер PIC12F683 для отсчета времени и микросхема MAX7219 для управления семи-сегментным дисплеем. Конец отсчета обозначается звуковым сигналом зуммера.
Принципиальная схема
Полная схема этого проекта приведена ниже. Две кнопки без фиксации (называются INC и TSET) используются для установки времени и запуска таймера. Они соединены параллельно и подключены к контакту AN3 АЦП микроконтроллера PIC12F683. На схеме видно, что при нажатии на кнопки на выходе получаются разные аналоговые напряжения. Когда кнопка INC нажата, напряжение на контакте на AN3 равно 0. Но если нажата кнопка TSET, напряжение на контакте AN3 около 2.5 В (делитель напряжения из двух резисторов 4,7 кОм). Если ни одна кнопка не нажата, то напряжение на контакте AN3 около 5В. Поэтому, опираясь на значение на выходе 10 битного АЦП, можно идентифицировать, какая кнопка нажата. Звуковой сигнал реализован при помощи ШИМ-сигнала на контакте GP2. В качестве дисплея используется 4 разрядный семи сегментный индикатор управляемый микросхемой MAX7219. Если вы не знакомы с микросхемой MAX7219, прочитайте мою статью Последовательный 4 разрядный семи сегментный индикатор для получения более подробной информации.
На фотографии показан полностью собранный проект. Я использую свою плату разработчика PIC12F и дисплейный модуль, состоящий их 4 разрядного семи сегментного индикатора и микросхемы MAX7219. Зуммер и кнопки установлены на макетной плате, но они могут легко поместиться на моей плате PIC12F.
Программа
Прошивка написана на C и скомпилирована в mikroC Pro для PIC микроконтроллеров. Часть программы для работы с MAX7219 взята из моего предыдущего проекта «Последовательный 4 разрядный семи сегментный дисплейный модуль». ШИМ сигнал 5 кГц появляется на контакте CCP1 при окончании времени таймера. Исходный код и HEX файл можно скачать ниже.
На рисунке выше показаны параметры фьюзов (внутренний генератор 4.0 МГц, MCLR, Power-Up timer, Brown out detection включены) для микроконтроллера PIC12F683.
Принцип работы
Таймер работает следующим образом. При подаче питания, дисплей инициализируется, и на всех 4 разрядах отображаются 0. Чтобы установить время, вам необходимо ввести значение одной цифры за один раз путем кратковременного нажатия TSET. При первом нажатии устанавливаются Единицы, по умолчанию 0. В это время другие разряды не горят. Чтобы установить цифровое значение от 0 до 9 используйте кнопку INC. При каждом нажатии INC, значение увеличивается на 1, и сбрасывается на 0 после 9. После установки значения Единиц, нажатием TSET выбираются Десятки, значение которых устанавливается аналогичным образом. Когда все 4 цифры заданы, вы можете запустить таймер путем удержания кнопки TSET примерно 2 секунды. Таймер запускается с коротким звуковым сигналом, а оставшееся время отображается на дисплее. Когда время истекает, дисплей мигает пять раз и звучит сигнал. На видео показана работа таймера.
Обратите внимание, что во время отсчета времени таймер не реагирует на нажатия кнопок INC и TSET. Если вы хотите сбросить или перезапустить таймер, нажмите кнопку Reset.
Вы можете купить 4 разрядный семи сегментный светодиодный индикатор SPI примерно за $12. Он позволяет вам работать с 4 разрядным 7-сегментным светодиодным индикатором, используя всего три порта ввода/вывода микроконтроллера, и позволяет управлять всеми сегментами, включая точки.
