Расширяем функциональность скриптов timegenerator

В последнее время очень часто на сайтах используются таймеры от сервиса timegenerator.ru. Однако, как я уже несколько раз упоминал, этот скрипт находится на удаленном сервере (то есть не на вашем хостинге), и поэтому если возникнут какие-то неполадки у сервиса таймгенератор, то таймер на вашем сайте перестанет работать. Да и ко всему прочему его настроить можно только на определённую дату. А что же делать, если вдруг нам нужно в маркетинговых или иных целях установить на сайт таймер, который будет отсчитывать, скажем, два часа с момента загрузки страницы? «Очевидно, в такой ситуации нам придется искать другой скрипт таймера», — скажите вы. Но нет, я предлагаю несколько иной выход. Давайте скопируем их скрипт к себе на сайт и изменим его под наши нужды.

Не хочу я описывать весь процесс того, как происходит копирование и изменение скрипта. Вместо этого я просто предлагаю скачать уже подготовленные мною таймеры, разработанные на базе стандартных скриптов от timegenerator. Выбирайте тот вариант, который вам необходим под конкретную задачу. В архивах для скачивания будут все 4 варианта скрипта в том порядке, в котором они размещены на картинке выше (vid1, vid2, vid3, vid4).


Обычный таймер от timegenerator (до даты)

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

Дата устанавливается параметрами (год, месяц, день, часы, минуты, секунды):

year = 2013; month = 9; day = 28; hour= 19; minute= 0; sec= 0;

Скачать скрипт

Скрипт с возможностью множественного вывода таймера на странице (с использованием class вместо id):
ДемоСкачать скрипт


Таймер на заданное время от загрузки страницы

Данный скрипт отсчитывает заданное в настройках время после загрузки страницы. То есть, если в настройках вы поставили 2 часа, то после того, как посетитель вашего сайта зашёл на страницу, таймер начнёт вести обратный отсчёт с 00:02:00:00 до 00:00:00:00. Обращаю внимание, что после обновления страницы или повторного захода на ваш сайт, таймер снова начнёт отсчет с 00:02:00:00 (с того времени, что указан в настройках).

Срок отсчёта устанавливается параметрами (дней, часов, минут, секунд):

day = 10; hour= 20; minute= 55; sec= 56;

ДемоСкачать скрипт

Скрипт с возможностью множественного вывода таймера на странице (с использованием class вместо id):
ДемоСкачать скрипт


Таймер на заданное время от загрузки страницы с куки (спасибо за модификацию Петру)

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

Срок отсчёта устанавливается параметрами (часов, минут, секунд):

hourX = 2; minuteX = 0; secX= 0;

ДемоСкачать скрипт


Зацикленный таймер до 00:00 каждого дня

Этот скрипт ведет отсчет до 00:00, а по наступлении этого времени отсчет автоматически начинается заново. Никаких дополнительных настроек делать не нужно.

ДемоСкачать скрипт

Скрипт с возможностью множественного вывода таймера на странице (с использованием class вместо id):
ДемоСкачать скрипт


Зацикленный таймер до 00:00 каждого дня (без указания количества дней)

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

Скрипт с возможностью множественного вывода таймера на странице:
ДемоСкачать скрипт

Расширяем функциональность скриптов timegenerator: 140 комментариев

  1. Елена

    а если необходимо зацикливание но период 3 дня, достаточно ли вместо 23 поставить 72 или нет?

    1. vetraz Автор записи

      Нет. Зацикливание на 00:00 работает по принципу отнимания текущего времени от 23:59. Если вместо 23 задать 72, то мы просто будем получать по часам 72 — 00 = 72, 72 — 01= 71 .. 72 — 23 = 49 и снова по кругу.

      Для реализации 3х суток нужно подумать над использованием кукис (cookies = печеньки). После первого захода будет добавляться «печенька» на время, оставшееся до истечения трех дней. То есть будет создаваться псевдо-дата в будущем для каждого пользователя в отдельности. Для «печеньки» можно задать период истечения на несколько секунд больше трехсуточного периода, чтобы она удалялась и таймер начинал отсчет заново.

      1. Вадим

        Подскажите пожалуйста, как зациклить таймер на три дня?

        Возможно вы знаете какой-то другой таймер с помощью которого это можно сделать?

        Если он умеет проверять по куки и по IP адресу вообще супер!

        1. vetraz Автор записи

          Несколько изменил один из скриптов. Куки выставляется на количество дней, задаваемых параметром day. Попробуйте потестировать, как ведет себя таймер на границе срока. По идее когда таймер дойдет до нуля, он остановится. Но после того как страница перезагрузится, таймер снова будет отсчитывать 3 дня.

          Привязка идет только по куки. Для теста нужно архив загрузить на хостинг или на виртуальный сервер (типа OpenServer), иначе при простом открытии файла index.html с компьютера не произойдет создания куки и скрипт правильно не сработает.

          Скачать можно по ссылке: http://mywpnote.ru/scripts/timers/timegenerator/timegenerator_fixedTime_cookie.zip

    1. vetraz Автор записи

      Если нет хотя бы базовых знаний html, то лучше заплатите 50 рублей фрилансеру, и он вам вставит. (Фрилансера можно найти на бирже Work-zilla.com)

      А вообще, все просто. Загружаете папку с таймером к себе на сайт. Затем открываете в любом текстовом редакторе (блокнот, вордпад и т.д.) у себя на компьютере файл index.html и смотрите на код. Все содержимое тэга <head> </head> вставляете к себе на сайт между этими же тегами (кроме тегов <meta charset="utf-8"><title>Скрипт Таймгенератор Вид 1</title>). Затем в том месте, где хотите вывести скрипт вставляете <div id="countbox"></div>

      Только не забудьте поменять ссылку на файл <link href="ссылка_на_вашем_сайте/style1.css" rel="stylesheet" type="text/css">

      1. Павел

        Здравствуйте!

        А подскажите, как добавить счетчик именно на сайт с WordPress? Что-то я никак сообразить не могу

        1. vetraz Автор записи

          Добрый день. Скачиваете архив с нужным вам скриптом. Распаковываете. Выбираете нужный вид (папку). Загружаете содержимое папки на хостинг. Проверяете, что загрузили папку на хостинг правильно и знаете, где она находится (http://вашсайт.ру/путь_до_папки/Index.html). А дальше предлагаю воспользоваться методом, описанным с моей статье про вставку javascript на страницы сайта. А именно вставляете способом «Вставка javascript-кода в <head>» ссылку на css файл и сам скрипт, а в текстовый редактор в режиме «текст» html-код для вывода блока.

          Но, конечно, для всего этого вам понадобятся знания html как минимум, чтобы разобраться в том, что и куда вставлять из кода файла index.html.

  2. kykysik12

    Подскажите, пожалуйста, а как разместить несколько таких таймеров на одной странице? Вставляю несколько , а таймер только один 🙁

    *несколько div id=»countbox»

    1. vetraz Автор записи

      Да, в таком виде несколько таймеров на странице работать не будет. По правилам на странице id="countbox" может быть только один. Чтобы заработало несколько таймеров, нужно изменить скрипты на использование класса.

      Раз вы уже не первый, кому данная функция нужна, в ближайшее время выложу вариант с классом. Возвращайтесь через пару дней и будет вам счастье 🙂

      1. kykysik12

        Спасибо большое, но у меня нет пары дней 🙁 Извините за беспокойство)

          1. kykysik12

            Даже не знаю, как Вас благодарить, Вы меня так выручили!!! Спасибо огромное!!!!! :-))))))))))

  3. Александр

    Как я не корячился, так и не установил себе три таймера… Один устанавливается. А три нифига не хотят…мелкие циферки в столбик есть… Идет отсчет… Но сами картинки не грузятся. При этом, повторюсь, один прекрасно работает! Убил добрых 5 часов. И ничего так у меня и не вышло…

    Подскажите, в чем дело, плз…

    1. vetraz Автор записи

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

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

  4. V-IX

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

  5. Александр

    Доброго времени суток!
    Cтолкнулся с такой проблемой, может что то с сайтом, может неправильно поступил. В общем суть: цифры начинают идти (до этого просто картинка), только когда правой кнопкой жму по таймеру — посмотреть код элемента или посмотреть код страницы.
    И ещё такой вопрос: написали что нужно вставить в код сайта, если у меня есть уже в коде ссылка на стайл, могу ли я добавить просто в существующий все содержимое из файла style1.css? Или может быть можно делать 2 ссылки рядом?

    Заранее благодарен.

    1. vetraz Автор записи

      Здравствуйте, Александр!

      Что касается первого вопроса, то не могу определенно ответить, так как не сталкивался с подобным. Возможно есть какой-то конфликт скриптов, или ваш браузер что-то неверно отображает (попробуйте в другом).

      По поводу второго вопроса могу сказать, что способ вставки не имеет значения. Вы можете скопировать код и вставить его в свой файл стилей, либо просто сделать вторую ссылку рядом. Хотя первый способ, на мой взгляд, все же более приемлем, так как в этом случае создается меньшая нагрузка на сервер (вместо одного файла будет загружаться один).

  6. Николай

    Здравствуйте. я так и не понял, как поставить несколько таимеров на одну страницу?
    Можно подробнее.

    1. vetraz Автор записи

      Добрый день!
      Для вставки кода нужны базовые знания html. А что по существу, то просто скачиваете архив со скриптами, которые поддерживают множественные таймеры (вторая строка кнопок) и смотрите исходный код. Скрипт и файл стилей копируете к себе на сайт в head, а таймер выводится любым элементом с классом countbox.

  7. Никита

    Аналогичная проблема как и у Александра.
    «Cтолкнулся с такой проблемой, может что то с сайтом, может неправильно поступил. В общем суть: цифры начинают идти (до этого просто картинка), только когда правой кнопкой жму по таймеру — посмотреть код элемента или посмотреть код страницы.»
    Что я только не делал, и скрипт рассовывал по разным местам(head,body,footer) и скрипты прочие отключал (vk, cf7 … ) и в разных браузераух смотрел, ниче не помогает, только после правой кнопки появляются цифры. Cайт svadborg.ru

    1. vetraz Автор записи

      Добрый день!
      Действительно наблюдается такая проблема у вас на сайте в google chrome. Firefox отображает все нормально. При этом в хроме также не работают переключатели слайдов (точки и стрелочки) в верхнем слайдере и слайдере с логотипами.

      Откровенно говоря, не знаю, почему он не работает. Попробуйте заменить:
      window.onload = function () {
      CountBox()
      }
      на:
      jQuery(document).ready(function($){
      CountBox();
      })

      И еще попробуйте родной скрипт вставить от timegenerator. Интересно, будет ли он работать.

      1. Никита

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

  8. Никита

    Классно, заработало в chrome, safari, firefox, opera. Не работает в IE вообще не видит таймера)) Если есть идеи как не лишать 10,7 % посетителей таймера, буду признателен.

    1. vetraz Автор записи

      Можно попробовать и вставку кода цифр перевести на jquery. Для этого нужно заменить в двух местах строчку:
      document.getElementById("countbox").innerHTML = out;
      на:
      jQuery("#countbox").empty().append(out);

  9. Дмитрий

    Здравствуйте! Скачал «Зацикленный таймер до 00:00 каждого дня», очень долго искал, наконец наткнулся на Ваш сайт. Спасибо. Возник такой вопрос. Ведь в этом таймере количество дней всегда = 0, как можно совсем удалить вывод дней? то есть как можно оставить в таймере вывод только часы: минуты: секунды? Жду ответ, спасибо.!

    1. vetraz Автор записи

      Добрый день! Сделал отдельный архив без дней. Смотрите конец этой статьи.

  10. Денис

    Здорово что поделились такой информацией про куки! А не подскажете где посмотреть функцию таймера чтобы он по истечении 3х дней прятал нужный мне див?

  11. антон

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

    1. vetraz Автор записи

      Добрый день!
      Опишите, как вы хотите настроить скрипт подробнее и где вы его проверяете (у себя на компьютере или на сервере). Не могу помочь, не зная вашей ситуации 😉

  12. антон

    Добрый день) Прошу прощения что сразу не написал — был в отъезде
    Счетчик проверяю на своем сайте — залит на хостинге)
    Использовать хочу так, как описывали ребята выше):

    1. я устанавливаю сколько счетчик должен отсчитывать:
    к примеру до конца акции у меня осталось 7 дней 20 часов 40 минут 10 секунд
    2. В счетчике идет отсчет с выводом количества дней, часов, минут и секунд
    3. Когда на счетчике заканчивается время — то есть 00:00:00:00 — он начинает автоматически отсчитывать установленное мной количество дней часов и т.п….

    Так же — желательно без привязки к базе чтоб сделать)

    1. vetraz Автор записи

      Тот вариант скрипта работает по количеству дней. Вот эту версию несколько изменил, и теперь она работает точно на заданное время.
      http://mywpnote.ru/scripts/timers/timegenerator/timegenerator_fixedTime_cookieDateObject.zip

      Одно НО: таймер перезапускается только после обновления страницы.

      1. антон

        «Одно НО: таймер перезапускается только после обновления страницы.»
        то-есть — будет 00:00:00:00 а потом я обновляю и если отсчитало от установленного времени 3 часа — то он правильно ж покажет?)
        не будет постоянно после перезапуска страницы начинать с заданного времени?)

        1. vetraz Автор записи

          Логика работы такая:
          1) Вы задаете в настройках время.
          2) После загрузки страницы скрипт проверяет создано ли куки.
          2.1) Если куки создано, то берет время из куки и запускает таймер.
          2.2) Если куки не создано, то берется текущее время, к нему добавляется ваш период заданный. Он записывается в куки, которое создается тоже на это время. Также с заданным временем запускается таймер.

          Когда таймер истекает, то он останавливается на 00:00:00:00. Если после этого вы перезагрузите страницу, то куки тоже уже устарело и удалилось, поэтому процесс пойдет по пути 2.2.

          1. антон

            Спасибо
            Все понятно и подробно)
            уже поставил и настроил)
            Спасибо еще раз громадное)

  13. Дмитрий

    Здравствуйте! Поставил таймер зацикленный, без дней, vid2. На компьютере работает — всё ок. На сервер загрузил: на этом же компьютере, где ранее тестировал из папки — работает и с сервера; а на другом компьютере счётчика не видно (браузер и там и там Хром). С айфона тоже заходил — счётчик не видим.

    На сервере, встроенный текстовый редактор помечает восклицательными знаками две строки (8 и 14) в файле style2.css

    1. vetraz Автор записи

      Приветствую!
      Проверьте у себя на странице код скрипта. У вас неправильная строчка:
      amount = ((2 — dateNow.getHours())*60*60 + (59 — dateNow.getMinutes())*60 + (60 — dateNow.getSeconds()))*1000;

      Должно быть:
      amount = ((23 — dateNow.getHours())*60*60 + (59 — dateNow.getMinutes())*60 + (60 — dateNow.getSeconds()))*1000;

      1. Дмитрий

        Да, я сам это поменял — с тем, чтобы таймер был на два часа… Думал, там это и меняется… Сейчас вернул на место — поставил 23. Счётчика по прежнему не видно.

        Самое главное, что с исходной страницы всё работает. Проблема, по видимому из за вставки кода на сайт (возможно, конфликтует с другими элементами джава скрипт на странице).

        Что Вы об этом думаете?

        Заранее благодарен. С уважением, Дмитрий=

        1. vetraz Автор записи

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

          1. Дмитрий

            Решил вопрос с невидимостью таймера таким способом: между тегами не вставлял ничего, перед местом вставки счётчика закрыл теги и вставил страницу со скриптом счётчика целиком (еще добавил id="hideMe" — чтобы прятал часть текста по окончанию действия таймера).

            Еще такой вопрос: как сделать, чтобы таймер начинал отсчитывать не с 23 часов — а например с двух часов?

            P.S. Скрипт достойный, выражаю признательность за хорошее исполнение! С уважением, Дмитрий=

        2. vetraz Автор записи

          Еще такой вопрос: как сделать, чтобы таймер начинал отсчитывать не с 23 часов — а например с двух часов?

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

  14. Николай

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

  15. Иван

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

      1. Иван

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

        1. vetraz Автор записи

          Не понял вашего вопроса. Таймер выводится таким кодом <div class="countbox"></div> в любом месте страницы, где вы его разместите.

  16. Кирил

    Супер вы мне очень помогли ! скажите пожалуйста как мне поменять точку отчета таймера ?

      1. Кирил

        Зацикленный таймер до 00:00 каждого дня (без указания количества дней)

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

        Скрипт с возможностью множественного вывода таймера на странице

        1. vetraz Автор записи

          В этом не изменить. Можете попробовать взять скрипт из комментария Николая и использовать стили из скачанного вами скрипта. Также измените переменную out в двух местах в скрипте из комментария.

  17. Сергей

    Большое спасибо за скрипт. Радует что автор отвечает и развивает скрипт. Спасибо и удачи в развитии скрипта.

  18. Ольга

    Отличный скрипт, автор просто спас от многих проблем, большое спасибо!))) Один вопрос, как сделать так, чтобы таймер запускался не после полной загрузки страницы, а сразу? А то если страница много весит, таймера долго не видно((

    1. vetraz Автор записи

      Здравствуйте, Ольга. Ваш комментарий попал в корзину, и я его не заметил (перед отправкой нужно отметить галочкой поле под кнопкой отправки «Я не спамер»).

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

  19. Петр

    Подскажите как мне настроить таймер таким образом, чтоб он был зациклен по 12 часов с нужного мне времени. Например, магазин работает с 10:00 до 22:00 — в это время таймер показывает сколько времени осталось до закрытия, а после 22:00 начинает отсчет времени до открытия магазина

    1. vetraz Автор записи

      Здравствуйте, Петр. Прошу прощения за то, что так долго не отвечал. Если вопрос еще актуален, то вот мой ответ:

      В рамках готовых скриптов из этой статьи настроить необходимый вам функционал вы не сможете. Для реализации описанного вами алгоритма нужно переписывать сам скрипт. Логику его работы я вижу так:
      а) После загрузки страницы определяется текущее время. Если количество времени меньше верхней границы промежутка (22:00 в вашем примере), то время отсчета рассчитывается до нее. Иначе считаем количество времени до 00:00 + количество времени до нижней границы (10:00).
      б) После обнуления таймера, он должен снова пересчитывать текущее время до следующего промежутка (рабочие или нерабочие часы). Хорошо, если при этом будет изменяться и текст заголовка перед таймером.

      Более сложный вариант может возникнуть, если ваш магазин работает не 7 дней в неделю. В этом случае необходимы будут более сложные доработки алгоритма.

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

      P.S. Если вы уже нашли готовое решение, то с радостью поделюсь им с посетителями своего сайта.

      1. Петр

        нет, решение я не нашел. есть нечто похожее тут http://hello-site.ru/games/timer/custom1.php
        но я не смог разобраться как настроить на нужное мне время. я хочу уточнить по работе магазина. таймер планируется установить на магазин который работает 24часа ежедневно, просто цены в ночное время и цены в дневное отличаются. и чтобы люди могли видеть сколько времени осталось до изменения цен на ночные или наоборот на дневные и планируется поставить этот таймер.
        Буду очень вам признателен за помощь. просто именно этот таймер на мой взгляд самый «интересный» из тех что я видел во время своего поиска нужного решения.

        1. vetraz Автор записи

          Не смог я запустить именно этот скрипт с необходимой логикой, однако мне, кажется, удалось настроить скрипт от Keith Wood’a. Кроме того я взял визуальные стили от этой версии скриптов, поэтому разницы «на глаз» вы не заметите.

          Кроме самого таймера я сделал вывод надписи, которая также меняется в зависимости от периода времени. Время работы и текст надписей задается в файле scripts.js в папке js (в каждом из 4-х визуальных стилей он свой — выбирайте на свой вкус).

          Скачать архив вы можете по ссылке: http://mywpnote.ru/scripts/timers/Keith_Wood/periods_timegenerator_skin.zip

  20. Евгений

    Добрый день, подскажите, при установке на одну и туже страницу вашего таймера «Зацикленный таймер до 00:00 каждого дня (без указания количества дней)» с модулем callme (http://dedushka.org/kod/6722.html) последний перестает работать, это как то коды между собой конфликтуют?
    спасибо.

    1. vetraz Автор записи

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

    1. vetraz Автор записи

      Все размеры корректируются в файле стилей. Однако при изменении размеров вы столкнетесь с тем, что для правильного отображения нужно будет изменять фоновые изображения. В реальности, можно совсем изменить внешний вид таймера либо адаптировать текущую тему оформления к другому скрипту.
      К сожалению, более подробный ответ дать не могу (для редактирования нужны умение пользоваться инспектором кода и базовые знания css) ибо нет свободного времени на это.

  21. Василий

    Здравствуйте, почему зацикленный таймер, который до 00:00, отображается сразу в 3 окошках: http://mywpnote.ru/scripts/timers/timegenerator/class/timegenerator_zaciklenniyDo_00_00/

    Как вставлять несколько таймеров в сайт, но чтобы из одного кода получался 1 таймер, а не сразу 3 штуки?

    Заранее спасибо!

    1. vetraz Автор записи

      Добрый день. А зачем вам отображать одновременно тикающий таймер тремя разными скриптами, если он будет показывать одно и то же время?
      А по сути: за вывод отвечает строка var list = document.getElementsByClassName("countbox");. countbox — это название класса, к которому цепляется таймер. В каждом таймере в вашем случае оно должно быть уникально, как собственно и у блока, на который таймер будет цепляться.

  22. Олег

    Здравствуйте . Давно пользуюсь вашими скриптами , очень удобно . Но сейчас столкнулся с проблемой. Зцикленный таймер без дней нужно зациклить на 27 минут 3 секунды . Голову сломал уже и ничего не получается . Подскажете как сделать ? Заранее благодарен !

  23. Николай

    Добрый день!

    А как реализовать таймер, зацикленный до конца текущего месяца, который обновляется в первый день каждого месяца?

    1. vetraz Автор записи

      Здравствуйте, Николай. Сделал на основе другого скрипта отсчет до конца месяца с автоматическим обновлением по окончании отсчета. Надеюсь, нигде не напортачил в коде.

      Ссылка для скачивания:
      http://mywpnote.ru/scripts/timers/Keith_Wood/month_cycled_timegenerator_skin.zip

  24. Юрий

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

    1. vetraz Автор записи

      Добрый день. Не совсем понимаю необходимость такого сценария. Зачем запускать его в произвольные 2 часа от загрузки, а потом еще на 2 часа после 00:00? Вполне логично отсчитывать промежутки, какое-то определенное время суток, вести отсчет до даты. Уточните предполагаемый сценарий его работы. Возможно, в комментариях я уже оставлял необходимый скрипт.

      1. Юрий

        Вот допустим ставим счетчик на 18 часов. В 00:00 начинается отсчет этих 18 часов. И так это время уменьшается до 6-ти вечера, а после счетчик показывает все по нулям.
        И снова в полночь он запускается.

  25. Marsel

    Очень благодарен за проделанную работу. Но есть вопрос. Вставляю таймер vid1 на страницу и у меня фон таймера черный. как сделать прозрачный?

    1. vetraz Автор записи

      Не совсем понимаю, что нужно сделать прозрачным. Он в оригинале (на сайте таймгенератор) черный. Я в этом плане ничего не менял.

    1. vetraz Автор записи

      А зачем вы через ифрейм скрипт вставляете? Вам нужно скопировать только файлы со скриптом в папку с вашей страницей и вставить в html-код страницы ссылку на стиль, сам скрипт и блок, на который скрипт будет цепляться. https://yadi.sk/i/zoZch__CbrCgB

      1. Marsel

        Есть одна проблемка)) я делаю сайт через конструктор) я не понимаю этих кодов. есть возможность объяснить как сделать, если я использую web builder? Вставлял все как сказано на этом сайте http://wysiwygwebbuilder.ru/forum/viewtopic.php?f=12&t=1808&p=16157#p16157 кто то писал как использовать ваши счетчики)

      2. Marsel

        все сделал) поменял фон в файле html на transparent. до этого было #000. Спасибо большое))

  26. Павел

    Добрый день!
    Мне на сайт необходимо на разные страницы сделать разные счётчики. Всего вариаций 4. Получается, что в head нужно запихнуть 4 отдельных скрипта, немного пофиксеных по названию класса или id?

    1. vetraz Автор записи

      Здравствуйте!
      Не совсем понял вашу ситуацию. У вас один сайт управляется одним шаблоном на всех страницах? В таком случае да, понадобятся 4 отдельных скрипта, немного пофиксеных по названию класса или id. Плюс не забудьте пофиксить названия классов или id в стилях, а также ссылки на картинки для таймеров.

      А вообще лучше подключать нужный таймер на нужной странице (скрипт и стиль). При этом не обязательно это делать в head (хотя желательно).

      1. Павел

        Добрый день!
        У меня сайт на WordPress. Соответственно, там шаблон, в котором header один. Туда по идее и нужно проставить все скрипты, насколько я понимаю, да?

        1. vetraz Автор записи

          Если вы будете использовать таймер на всех страницах, то да. Но не рекомендовал бы такой подход.
          Лучше взгляните на статью http://mywpnote.ru/poleznyie-sovetyi/wordpress-vstavka-javascript-v-zapis-ili-stranitsu/#head
          Будете вставлять нужный код только на той странице, где хотите его использовать. А в саму статью нужно будет ставить только блок для вызова (див с айди или классом).

  27. Евгений

    Здравствуйте! А как можно вставить таймер в сайты которые я делаю без знаний html в программе web builder или adobe muse. там есть инструмент для встраивания html.

    1. vetraz Автор записи

      Добрый день!
      Увы, я не могу ответить на ваш вопрос ибо обладаю знаниями в html, и поэтому не пользуюсь вышеперечисленными программами. Как вариант в комментариях (если не изменяет память) пробовали вставить через iframe.

      С другой стороны, как человек, связанный с веб-разработкой, могу пожелать вам перейти на «светлую сторону» знающих html, css, js.

  28. Роман

    Еще бы возможность менять подписи «дни часы минуты секунды» на «дней часов минут секунд» и было бы отлично

    1. vetraz Автор записи

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

  29. Satay

    А не подскажите как увеличить разрядность ДНИ?
    Например у меня несколько месяцев до события…
    или ввести параметр месяцы.

    1. vetraz Автор записи

      боюсь, что доступно объяснить я не смогу. И в ближайшее едва ли будет возможность что-то доработать.

  30. Петр

    Модифицировал таймер, чтобы считал определенное время от первого входа с куки

    сколько добавить к моменту первого входа определяется строкой:
    hourX = 2; minuteX = 0; secX= 0;

    Сам скрипт:
    http://mywpnote.ru/scripts/timers/timegenerator/timegenerator_cookie_petr.zip

    Демо:
    http://mywpnote.ru/scripts/timers/timegenerator/timegenerator_cookie_petr/

    1. Игорь Чишкала

      Петр, ваш скрипт не сохраняет куку после закрытия браузера, а похоже работает в сессии, При закрытии-открытии браузера счетчик запускается снова, а не отсчитывает время от самого первого визита на сайт…

      1. Mihail

        Маленькое уточнение. корректно работает в Chrome а в Opera и в Firefox — куки сбрасываются после закрытия браузера

    2. Тим

      Петр, не могли бы Вы добавить дни в Ваш скрипт? Сейчас можно настроить только часы, минуты и секунды. А хотелось бы настроить ещё и дни.

  31. Игорь Чишкала

    Моя благодарность автору безгранична, особенно за сэкономленное время! Не пришлось самомму перепиливать таймер. По моей задаче необходимо использовать зацикленный таймер на 1 сутки, но возможно придется написать с куками для индивидуального таймера (1 сутки с момента первого захода на сайт). Автора статьи и сайта интересует скрипт с куками (в качестве благодарности за его работу)?
    Спасибо большое!

    1. vetraz Автор записи

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

      вот и сам скрипт: http://mywpnote.ru/skriptyi-i-gotovyie-resheniya/rasshiryaem-funktsionalnost-skriptov-timegenerator/#comment-813

      можно попробовать на его основе доделать. В любом случае с удовольствием опубликую ваши наработки)

      1. Игорь Чишкала

        Супер!
        Раз такой скрипт уже есть, наверное пока и добавить ничего 🙂

        P.S. Есть задача для скрипта с куками выводить попап окно по окончанию времени, но это пока не написал.

        1. vetraz Автор записи

          Ну это совсем просто) дописать функцию попапа и вставить ее вызов в ту часть, где в условии подставляются нули.

    1. vetraz Автор записи

      Это обычный javascript и по сути его добавление на страницу ничем от других не отличается. Однако, каким образом что делается в каких-то неведомых программах я не имею представления. Работа программ на совести их разработчиков, вот к ним и обращайтесь за разъяснениями.

  32. Константин

    Здравствуйте!

    Хочу сразу сказать Огромное спасибо за отличную подборочку данных скриптов!

    Но, столкнулся с такой проблемой, подскажите пожалуйста, как мне можно реализовать несколько таймеров на моем одностраничнике?
    Конкретно необходимо чтобы выводил в одном месте сколько осталось дней(например до 1 мая 2015г), в другом месте чтобы выводил сколько дней осталось(например до 1 июня 2015г), и в третьем месте чтобы показывал обычный зацикленный суточный таймер(час : мин : сек)?

    Заранее очень благодарен за помощь!

    1. vetraz Автор записи

      Приветствую! Если имеете хоть небольшое представления, как работает html, и немного логики, то посмотрите на картинку. Я отметил место, которое отвечает за «прицепку» скрипта на html-элемент (лучше используйте скрипты с классами).

      http://mywpnote.ru/wp-content/uploads/2015/04/screen1.png

      У вас получается необходимо 3 скрипта с разными классами, которые выделены зеленым (getElementByClass в языке программирования javascript отвечает за взаимодействие с элементом по его классу). Берете один скрипт. Задаете ему свой класс. Затем второй и третий. И соответственно выводите их в блоки, используя те классы, что задали в скрипте.

      А вот стиль нужно подключить всего один раз (он будет общим для всех 3х скриптов).

  33. Иван

    Добрый день! Спасибо за скрипты, только вот у меня такой вопрос а можно ли переделать зацикленный таймер на месяц?
    Заранее благодарен!

  34. Владимир

    Подскажите, пожалуйста как установить таймер на страничку (index.php) в определенное место на страничке? Я никогда того не делал, а сейчас понадобилось ..

    Спасибо большое!

    1. vetraz Автор записи

      По идее вставка в файл .php ничем не отличается от вставку в обычную html-страницу, если, конечно, у вас файл простой (не часть фреймворка или cms, где вставлять скрипты нужно в файлы шаблонов). Главное — вставляйте в разрыв php-кода, то бишь ?> разрыв <?php .
      Однако каждая страница индивидуальна, и механизм вставки может варьироваться.

  35. Игорь

    Большое спасибо разработчикам! Очень дельная штука.

    Один вопрос про таймер с привязкой к куки: если закрываешь браузер настройки таймера и должны сбиваться?

    Плюс всем, кто спрашивал про вставку таймера в muse, то я это без проблем сделал через iframe указав ссылку на расположение таймера.

    Еще раз большое спасибо!

    1. vetraz Автор записи

      По идее настройки сбиваться не должны. Но если вы тестируете локально (без загрузки на сервер или на виртуальный локальный хостинг), то куки браузер не создает.

  36. Сергей

    Может просмотрел, но такой вопрос. может ли этот таймер, после окончания отсчета времени, т.е. после обнуления менять часть HTML кода. Например во время акции выводится один блок кода с картинками или текстом стоимости, а после обнуления заменяет его на другой блок кода в котором можно прописать уже другую стоимость. Сам счетчик при этом может либо продолжать оставатся по 00 00 00, либо исчезать, это уже не принципиально.

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

    Интересует обратный отчет до указанной даты, без всяких куков.

    1. vetraz Автор записи

      Вполне может делать все, что пожелаете. Но необходимо немного знать javascript, чтобы дописать функционал.

      На скриншоте выделил ту часть кода, которая отрабатывает, когда таймер обнуляется. В место, выделенное стрелочкой (после }) можно вставлять необходимый вам код. Код всех приведенных в статье таймеров практически идентичен.

  37. Саша

    Помогите, пожалуйста! Не могу вашу идею осуществить на ЦМС ModX Revolution 🙁
    Мне необходимо добавить два счетчика на одну страницу. Просидел уже около 4 часов и толку ноль 🙁 Пробовал и в шаблон вставлять и в index.php…

    1. vetraz Автор записи

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

  38. Антон

    Добрый день!
    Подскажите, использую Ваш таймер — Таймер на заданное время от загрузки страницы с куки (спасибо за модификацию Петру). На хостинге работает так, 2 часа прошло, таймер стал 00-00-00, перезагрузка страницы на помогает и время снова не начинает считать.

    Что нужно для этого сделать? Подскажите, пожалуйста. А то эти 00 глаз режут:)

      1. Антон

        Добрый день!
        » Почистите куки» — клиент вряд ли будет чистить куки, чтобы не увидеть 00-00. Не подскажите, как сбрасывать счетчик после того, как он дошел до конца?

        1. vetraz Автор записи

          Здравствуйте! попробуйте вставить костыль (строчку, выделенную стрелкой в то же место, что на скриншоте).
          Скриншот сброса таймера с куки

  39. Евгений

    Привет! Подскажите, пожалуйста, как изменить размеры таймера? Можно ли сделать адаптивным? Если нет, то как уменьшить в коде. Интересует Таймер на заданное время от загрузки страницы стил 4

    1. vetraz Автор записи

      Добрый день! Все можно, ведь это обычный css. Выставляете для классов .countbox-days, .countbox-hours, .countbox-mins, .countbox-secs { background-size: 100% auto; } и это же свойство для .countbox-days-text,.countbox-hours-text,.countbox-mins-text,.countbox-secs-text. А затем начинайте пропорционально уменьшать размеры этих блоков (width, height, font-size)

  40. Алина

    Здравствуйте. Очень интересная и полезная тема. Спасибо.
    Хотелось бы также узнать, а возможно ли сделать скрипт, чтобы он был с несколькими таймерами и с заданным временем от загрузки страницы с куки для каждого таймера.
    У меня есть скрипт с несколькими таймерами на одной странице, с помощью prompt можно задать для каждого счетчика своё время. Но при перезагрузке или выключении браузера все таймеры сбрасываются в 0.

  41. Николай

    Подскажите пожалуйста, как вставить VID4 на сайт в Adobe Muse ?
    Заранее Спасибо!

    1. vetraz Автор записи

      Adobe Muse это коммерческая разработка, к которой я не имею никакого отношения. Разумно было бы задавать вопрос создателям этой программы. Но вы не первый задаете подобный вопрос. Слышал, что можно попытаться вставить через iframe (создаете отдельную страницу с таймером и вставляете через фрейм к себе на страничку). Второй вариант попытаться вставить скрипт в страничку, которая генерируется мьюзом для загрузки на хостинг. В любом случае это требует базовых знаний html. Если вы такими не обладаете, то лучше обратитесь к фрилансерам.

  42. Сергей

    «Vetraz», день добрый, спасибо вам за полезные скрипты! Вопрос у меня по «Таймер на заданное время от загрузки страницы»….Как сделать (написать код) так, чтобы параметры типа min или sec были не константами, а передавались в качестве переменных (аргументов) при вызове функции CountBox? Пытаюсь сам это сделать, но у меня не получается. Просьба поделиться советом-кодом.
    С уважением,
    Сергей

    1. vetraz Автор записи

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

      пример работы: https://timegeneratoronload.vetraz.repl.co
      код примера: https://repl.it/@vetraz/timegeneratoronload

      1. Сергей

        О! Спасибо за код и оперативный ответ!!! «Vetraz» (извините, не знаю Вашего имени, поэтому вынужден так по дурацки обращаться к Вам), мне больше подходит тип таймера «VID2» и я использую настройки style2.css из примера скрипта, который Вы разместили в начале этой ветки публикации.

        Можно ли в новом коде таймера указать ссылку именно на эти настройки, а не использовать …css/style1.css при вызове таймера?

        Извините, что так примитивно объясняю задачу (я не силен в html программировании).

        Хорошего дня!
        С уважением,
        Сергей

        1. vetraz Автор записи

          Вам ничего не мешает попробовать 😉

          Если будет что-то криво отображаться, то перенесите из скрипта второго вида строчку, отвечающую за формирование html разметки. По сути стили применяются к разметке, а js отвечает за ее изменение.

          Очень рекомендую разобраться с основами HTML, CSS, JS. Там ничего сложного и все довольно увлекательно 🙂

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *