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

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

Речь пойдет о нескольких вариантах, в одном случае – это будет скрипт счетчика обратного отсчета, который будет зациклен на каждые 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 минут, и такой «важный» элемент будет присутствовать у вас на сайте. Если возникнут вопросы — пишите в комментариях, я обязательно помогу подключить счетчик!

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

Для тех, кому необходим другой тип счетчика обратного отсчета, о котором говорилось в начале статьи, существует сервис с простым до безобразия способом подключения. Все что вам нужно сделать — это зайти на сайт https://megatimer.ru/ и выбрать один из предложенных таймеров, настроив его за несколько простых шагов.

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

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

32 комментария

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. Здорово)

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

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

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

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

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

    1. Привет. Я не работал никогда с webbilder. Насколько я понимаю это конструктор. Он должен давать возможность прописать свой код на странице.

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

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

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

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

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

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

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности