Как подключить счетчик обратного отсчета времени на сайт

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

Речь пойдет о нескольких вариантах, в одном случае – это будет скрипт счетчика обратного отсчета, который будет зациклен на каждые 24 часа. То есть, вы сможете делать акцию. Например: “до конца дня - скидка 50%” и таймер будет показывать, сколько времени осталось до конца дня. По истечению суток, таймер перезапустится и снова начнет отсчет

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

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

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

Счётчик обратного отсчёта времени с перезапуском

Скачать исходник

Итак, счетчик обратного отсчета времени, который будет перезапускаться по истечении суток. Разработал его один умелец у которого блог 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 и выбрать один из предложенных таймеров.

счетчик обратного отсчета онлайн

Далее жмем “Выбрать” и задаем дату окончания отсчета:

готовый счетчик обратного отсчета

Теперь нажимаем “Создать счетчик” и перед вами всплывет модальное окно, из которого необходимо скопировать код и вставить в свой сайт.

код счетчика обратного отсчетаДля примера, я вставлю в эту статью такой счетчик:

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 33

  1. Дмитрий

    А мне совсем не понравился timegenerator.ru. Кроме задания даты больше ничего делать нельзя. А подключать сторонние плагины уж ооочень муторно. Поискал аналоги, нашел 2-3 сайта покруче таймгенератора. Больше всех впечатлил таймер для сайта e-timer.ru. Настроек куча, то, что мне нужно, советую всем)

    • dimadv7

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

    • Юрий Костенко

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

    • Никита

  2. Дизайн квартир

    А я скачал и установил. Нормально работает.

  3. макс

    Отличная штука! но есть проблема обнаружил сегодня
    конфликт .js счетчика и callme dedushka.org/kod/6722.html

    в месте не как не работают

  4. макс

    Решил проблему)
    оба скрипта используют (window.onload) следовательно первый скрипт никогда не будет инициирован 🙁

    первый:
    window.onload = function()
    {
    script1();

    Второй:
    var script1=function() {
    // инициализация первого скрипта
    }

    такой вариант при загрузке первого window.onload = function() запускается второй script1();

  5. Вася

    Подскажите как на платфору опенкарт установить данный счеча

    • dimadv7

      Я к сожалению не знаком с этой CMS, и не знаю структуру папок и т.д. Но процедура ничем отличаться не будет, когда у вас будет ftp доступ к сайту.

  6. Дмитрий

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

    • dimadv7

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

  7. Виталий

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

    Единственное, что нашел — это http://megatimer.ru/
    Может кому будет полезно. Главная фишка для меня — зацикливание счетчика и перезапуск в нужный момент. По функционалу как мейкдрим, но зато бесплатный )

    • dimadv7

      Спасибо, отличное решение и альтернатива))

    • Виталий

      Юзаю уже на 4х сайтах — полет стабильный! Может стоит в обзор добавить, тк из всех вариантов — этот самый рабочий ))

    • dimadv7

      Ок, как будет времени больше — добавлю обязательно)

    • Юра

      Спасибо огромное! это лучшее решение, которое я видел!

  8. Антон

    ДРУГ! СПАСИБО! Я искал зацикленный на 24 часа таймер уже дня 3. А тут готовый код и ничего не нужно менять, только поправить под нужное оформление! Здоровья тебе!

    • dimadv7

      Ах-ха! Пожалуйста. Нужно мне плотнее продвижением заняться, чтоб не приходилось 3 дня искать)))

  9. Чебурашка

    Спасибо большое ! Всё просто и понятно …

    • dimadv7

      Здорово)

  10. Чебурашка

    Пытаюсь установить скрипт счетчика на сайт, но возникла проблема. Ознакомившись с установкой скрипта счетчика, первую часть порядка установки удалось выполнить легко, а следующие шаги остаются для меня не понятными : Как, и куда скопировать img, css и js ?

    • dimadv7

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

  11. Иван

    А как устанавливать свою дату в скрипте вашем, часы и минуты я понял как выставлять, а если я хочу не от текущей даты а просто счетчик на 2 дня

    • dimadv7

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

  12. Евгений

    Привет! Спасибо за код! Подскажи пожалуйста, как установить его в WebBuilder ?

    • dimadv7

      Привет. Я не работал никогда с webbilder. Насколько я понимаю это конструктор. Он должен давать возможность прописать свой код на странице. Вот воспользуйся этой возможностью. Если не получится, то спроси здесь Парень как раз на webbuilder(е) специализируется.

  13. Михаил

    К сожалению timegenerator.ru не работает.

  14. Александр

    Большое спасибо, хороший скрипт, все работает.
    Но никак не могу уменьшить размеры скрипта. Работаю в Dreamweaver, нужны пропорции — ширина 227 px , высота 49 px. Заранее спасибо.

    • dimadv7

      Не самый лучший вариант для редактирования. Дело в том, что здесь фон цифр — это картинки. Он задается не при помощи кода, а картинкой. Следовательно размер фиксированный. Можно конечно, менять размер шрифта и менять отступы, но этот пример не самый лучший для этого. Воспользуйтесь сервисом http://megatimer.ru/ Очень прост в настройке и легко «подкрутить» под любой дизайн.

  15. Андрей

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

    • dimadv7

      Заново начнет считать, каждые 24 часа

  16. Максим

    Добрый день, подскажите как это все подключить на cms modx revo!? не могу понять куда скидывать файлы…

    • dimadv7

      Я не знаком с архитектурой Modx

Добавить комментарий