JavaScript таймер обратного отсчета (MU Timer)

Бесплатный JavaScript таймер обратного отсчета для сайта

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



Для нетерпеливых, сразу ссылки:

Пример бесплатного таймера обратного отсчета в действии:

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

Подключение

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

  1. Подключить jQuery, например, используя CDN, как в примере ниже.
  2. Подключить mutimer.js, в самом файле отредактировать переменную muStyleSheetPath.
  3. Добавить скрипт инициализации таймеров с нужными параметрами.
  4. Добавить в нужных местах DIV-ы с ID таймеров и классами оформления.

Вот пример:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://frontcamp.com/go/tools/mutimer/demo/web/s/mutimer.js" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">// <![CDATA[
$(function(){
new MUTimer({month:'11',day:'11',hour:12,tz:-8, lab:'mutimer1'});
new MUTimer({month:'12',day:'3',hour: 23,tz:-8,lab: 'mutimer2'}); 
});
// ]]></script>

Это код, который выводит оба таймера в данной заметке.
Для размещения таймера на странице, добавляем DIV-контейнеры:

<!-- ... -->
<div class="deep-pink" id="mutimer1"></div>
<!-- ... -->
<div class="dark-red" id="mutimer2"></div>
<!-- ... -->

Собственно, всё остальное осталось от предыдущей версии таймера — совместимость, возможность стилизации, гибкое позиционирование, настройки финальной точки отсчета и возможность настройки редиректа.
Все параметры описаны в начале файла mutimer.js. Все параметры при инициализации задавать не обязательно, в этом случае, пропущенные параметры примут значения по-умолчанию:

this.config = {  // defaults
    month: 0,
    day  : '+1',
    hour : 23,
    tz   : 0,
    lab  : 'mutimer',
    msg  : 'Sorry, you are too late…',
    url  : '',
    delay: 0
};

А вот и второй инстанс таймера:

P.S.: Как разработчик, я хотел бы узнать:
1) для каких задач вы пользуетесь таймером;
2) что вы хотели бы видеть в следующей версии;
3) если вы выбрали другой таймер, дайте, пожалуйста, ссылку и напишите по какой причине вы выбрали именно его.
Буду благодарен за отзывы в комментариях.

Поделитесь с друзьями:



82 комментариев к “JavaScript таймер обратного отсчета (MU Timer)

  1. установила счетчик, в Опере норм работает, а в Explorer вообще не видно. как починить?

    • Только что перепроверил, в IE должно работать.
      Не видя страницу сложно сказать в чем проблема, возможно, конфликт скриптов. Обратитесь к кому-то, кто разбирается в верстке и JavaScript.

    • Это связано с различием функциональной совместимостью CSS в различных браузерах.

    • В первой версии таймера были описаны все параметры:

      Основные настройки таймера

      month — месяц, '*' — следующий, '0' — текущий, или 1-12 (номер в году);
      day — день, 1-31 или '+N' - через сколько дней от сегодня;
      hour — часы, 0-23;
      tz — смещение часовой зоны от UTC;
      lab — id элемента с таймером в HTML коде;
      msg — текстовое сообщение, которое будет показано когда таймер достигнет указанного времени.

      Время (часы и минуты) задать относительно нельзя. Но, можно задать относительно день и/или месяц.
      Например, установить время на 18 часов и в параметре "month" указать 0 (текущий) а в "day" указать "+1" (завтра) и таймер будет считать время до 6 вечера следующего дня. На следующий день снова до следующего и т.д.

      Применительно к MU Timer это будет выглядеть так:

      new MUTimer({month:'0',day:'+1',hour:18,tz:0, lab:'mutimer'});

      (текущий месяц; следующий день; 18 часов; тайм-зона: 0; id контейнера с таймером: mutimer)

      А делается это в коде инициализации. В текущей заметке см. блок кода с предваряющим текстом: "Вот пример:".

  2. подскажите как выровнять счетчик после его размещения на странице. съезжает в право за страницу(

    • К сожалению, не могу помочь, т.к. надо смотреть как это реализовано конкретно в вашем случае. Обратитесь к любому толковому верстальщику, он вам поможет.

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

    • Да, можно используя COOKIEs. Когда посетитель первый раз заходит на страницу, сохранять в cookie финальное время таймера. При повторном открытии страницы использовать данные из cookie для инициализации таймера.
      Спасибо за интересную идею! Когда будет свободное время, я постараюсь сделать новую версию таймера с подобной опцией.

      • Здравствуйте Максим,
        не подскажите направление для изменения параметров с использованием cookies.

  4. Таймер берёт данные из браузера. Если у посетителя время\дата настроены ошибочно, то таймер работает с ошибкой - проверил. Как задать фиксировано временной отрезок или взять данные от сервера?

    • Да, таймер работает в зависимости от локального времени пользователя.
      Таймер предназначен, в основном, для магазинов и их пользователей, 99% из которых имеет правильно установленное локальное время. Поэтому я не вижу смысла что-то менять в таймере в этом отношении - всех это устраивает (простота установки и использования).
      Дело в том, что таймер так или иначе, работает на стороне пользователя и если кто-то очень захочет вмешаться в его работу - он это сделает, даже если вы будете время задавать с сервера.

      Конкретно в вашем случае, если это имеет значение, решение может быть также относительно простым - JavaScript таймера отдавать через PHP и во время его отдачи инициализировать время таймера. За подробностями реализации обратитесь к разработчику вашего сайта (программисту).

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

  5. Максим, подскажите, как сделать так, чтобы скрипт не выводил количество оставшихся дней? (или чтобы отображалось всегда "0" дней)

    • Используйте относительное время, чтобы таймер всегда считал время до следующего дня, тогда день всегда будет показывать "0".
      Как это настроить читайте в комментариях в коде к параметрам таймера и четвертый комментарий сверху, примерный код инициализации:

      new MUTimer({month:'0',day:'+1',hour:18,tz:0, lab:'mutimer'});
  6. Отличный таймер. Только я не разобрался как изменить его размер, не подскажите?

    • Настройка внешнего вида делается через CSS. Найдите файл стилей и можете в нем менять всё, включая цвет, шрифты, расположения секций, и размеров контейнера.

  7. Здравствуйте!
    Скажите, пожалуйста, как сделать так чтобы установив один раз счетчик, допустим на 10 дней, время шло назад до 1 дня?

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

  8. Максим, здравствуйте!
    Пытаюсь "русифицировать" надписи (день, час, минуты..) Хочется, что бы получалось грамотно: 1 день, 2 дня, 5 дней. И у Вас в демке так и есть. А как это сделать?
    Спасибо!

  9. Нужен таймер отсчета дедлайн на сайте к примеру "у вас только 5 минут!" и 5 минут считает, что бы потом он закрывал страницу или перемещал на другую

  10. не понятно, что делать - у меня "час X" наступает 1 апреля следующего года...
    оставил "год" пустым, количество дней в параметрах указал правильное (243). Счетчик идет, но отображается почему-то не 243 а 239..
    есть рецепт?
    а вообще отличная штука, спасибо!
    ++ ЗА русификацию

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

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

    • Да, небольшая погрешность есть. У меня пока не получилось ее устранить. Но, в новой версии попробую исправить.

  12. Подскажите, куда необходимо размещать файлы (кроме .js и .css - с ними разобрался).
    Если размещаю их в инете на сервере в тех же папках - не находит бэкграунд.

    • Загляните внутрь CSS-файла, там указаны относительные пути к картинкам. Если пути отличаются, то нужно их изменить и в CSS-стилях.

  13. Косяк с 31 августа. Счетчик был установлен на 4 сентября. 30 августа выдавал нормально, а 31 сбился на "осталось 34 дня" при переключении на 1 или 30 число все возвращалось в норму.... проблемка однако

      • Максим, вы так и не нашли этот глюк?)
        Всплыла еще одна проблемка - переход на другой год. Ставлю месяц "1" и тогда вообще не работает. Пока висит на цифре "13" но как то караулить на новый год и менять потом на "01" как то не хочется)

      • Прекрасный таймер, спасибо вам большое за него!

        Хотя и с характером)
        При выставлении февральской даты 2014 года оп приплюсовывает еще 28 дней
        Похожая ситуация была и с августом, но там это всплывало только 31 числа)

  14. Нужен скрипт "таймер обратного отсчета" для одностраничного сайта: посетитель открывает страницу, а там есть описание товара со скидкой, таймер отсчета времени, который запустился, как только посетитель открыл страницу и кнопка заказа, если ее нажать то идет переход на страницу оплаты со скидкой. По истечении определенного времени, скидка заканчивается и если по истечении установленного времени нажать на кнопку заказа, то должен идти переход на страницу оплаты уже за полную стоимость. Можете такой сделать?

    • Этим я и занимаюсь для своих заказчиков, но заказы со стороны не принимаю, извините. А таймер - да, этот вам подойдет.

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

    var month = '0';
    var day = '+1';
    var hour = 9;
    var tz = 0;
    var lab = 'cdtimer';
    var msg = 'Акция закончилась';

    • Очень странно, ради интереса, я сделал такие настройки для нижнего примера в этой заметке:
      new MUTimer({month:'0',day:'+0',hour: 0,tz:0,lab: 'mutimer2'});
      Как видите, работает. Похоже, что что-то не так конкретно в вашем случае. Если найдете причину, отпишитесь, пожалуйста.

  16. появилась еще одна проблема, таймер стоит на 10 дней и не считает время до нуля, а просто каждые сутки вновь ставит 10 дней, как это исправить?

  17. Максим здравствуйте !

    У меня такой вопрос, можно ли использовать Ваш таймер в следующей задаче. Нужна цикличность отсчета в часах, через определённый промежуток.
    Например: таймер отсчитывает 3 часа 30 минут, выдает сообщение, а потом через 30 минут запускается опять на этот же отсчет.
    Спасибо заранее.

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

  18. Доброго времени суток!
    Помогите пожалуйста добавить переменную года.

  19. Здравствуйте! Прекрасный скрипт и красивый! Прикрутил его к лендинг пейдж на Joomla...Появилось ли решение с днями на русском языке? Чтобы было: "До конца акции 1 день, 2 дня, 5 дней" и т.д.

        • Дмитрий, подскажите свои координаты пожалуйста. я может чего не понимаю, но у меня 1 день не убирается , я +0 сделала, мне нужно до полуночи отсчет и заново. Разработка Максима очень нравится, но мне нужны русские буковки) и опять же я наверное совсем блондинка, не могу я зациклить его((

  20. Спасибо! Автор, подскажите как изменить надписи на русский язык? т.е. не days а Дней и т.д....

  21. Здравствуйте.
    Таймер классный: лёгкий но очень аккуратно выглядит.
    Собираюсь использовать в интернет магазине для акций типа "остальсь 5 дней - успей сделать заявку"

    Наверное, я туплю, но не могу понять:
    если я установлю не конкретную дату, а относительную. Например: 5 дней (day : '+5',), то таймер каждый день будет показывать что осталось 5 дней или будет: 5дней, 4дней, 3дней, 2дней, 1дней, 0дней //отсчет начнётся заново// 5дней, 4дней, 3дней, 2дней, 1дней, 0дней // и так вечно.
    (Мне нужно чтобы было именно так)
    Т.е. при установке относительного значения дней таймер запоминае тот день когда был установлен(?) и бесконечное количество раз отсчитывает указанное количество дней?
    Или каждый день будет написано "осталось 5 дней" а отсчитывать он будет только часы-минуты-сек-мс?
    Заранее спасибо!

    • Да, именно так. Таймер НЕ запоминает день. Он каждый раз начинает считать исходя из тех данных, которые вы укажите в настройках. Т.е. "+5" дней для него будет актуально каждый раз при запуске.

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

  22. Ты лучший, офигительный скрипт и бесплатно, тебе памятник нужно ставить!
    Я кончил от твоего таймера!

  23. Добрый день. Очень удачная реализация таймера. Спасибо огромное. С настройками разобрался, но не могу придумать или сообразить - как сделать:
    1. Чтобы если остался "0 дней" (т.е. выставленная дата окончания отсчета - текущая дата), чтобы надпись "0 дней" не отображалась, а отображались данные начиная с "Часы"?
    2. Как настроить таймер, чтобы была возможность отключить вывод кол-ва "Дней", а кол-во "Часов" корректировалось бы (перещитывалось) типа:
    36 часов: 10минут: 15 секунд ?

  24. Подскажите, пожалуйста, как выствить счетчик ровно на 3 дня. я ставлю day: +3, все остальные параметры - "0". А на тамере отображается оставщееся время 3 дня и 11 часов.

  25. И еще такой вопрос: запоминаются ли в куках или по ip время, когда чтартовал счетчик. Т.е. если пользователь сегодня открыл страницу, там 3 дня осталось, открыв ее завтра там будет 2 дня? или счетчик заново начнет считать?

  26. Максим, потыкался в разные цифры в настройках и уперся в не понимание. Как этот отсчет работает в итоге? Каков механизм настройки?

    Сейчас 20:22,
    ставлю day +1, hour 4, tz 9 получаю 2 часа
    ставлю day +1, hour 4, tz 0 получаю 11 часов
    Вроде все совпадает, но не понятно что за часы это? Часы точное время?

    То есть если я ставлю day+0, hour23, tz3, то я получаю конец отсчета в 23:00 каждого дня? И когда он отсчет заканчивается, через 1 час, опять отсчет идти начинает до 23х?

    • не понятно тогда, как сделать так, чтобы счетчик обновлялся и когда он это делать будет? )) Если будет? Как работает "+1" этот?

  27. Косяк какой-то с подсчётом дней, ставлю 10 февраля - пишет 39 дней, ставлю 10 марта - тоже 39 дней)

  28. Немного доработал таймер.
    1. Время назначается по смещению (что более логично для интернет торговли.) Например указываем 30 мин. и пошел отсчет в обратном направлении.

    2.Таймер работает в 2 режимах.

    а) Единое смещение для всех. После перезагрузки страницы или новом заходе отсчет начнется сначала.

    б) Отдельный таймер для каждого пользователя. ( Таймер активируется с момента первого захода на страницу и независимо от действий пользователя продолжает отсчет. Перезагрузка или повторный заход на страницу не останавливает таймер. Для каждого зашедшего на страницу таймер ИНДИВИДУАЛЕН. Если таймер установили на 24 часа, пользователь зашедший впервые увидит отсчет с 24 часов. При повторном заходе через 20 часов, он увидит, что осталось всего 4 часа. ).

    3. Возможность установки срока текущей акции. (Например поставим срок 5 дней и время на таймере 1 час. Через час время для пользователя истечет, и в течение 5 дней при новом заходе на страницу он будет видеть сообщение о том, что время вышло. Лишь через 5 дней отсчет начнется сначала)

    4.Управление старой и новой ценой (Например, пока тикает таймер, пользователь видит на странице акционную цену, и кнопку купить по сниженной цене. Когда время истечет, вместо сниженной цены будет показываться обычная цена товара, и соответственно кнопка КУПИТЬ будет настроена уже на старую цену. Это максимально подчеркнет ваш дедлайн)

    5. Сделана небольшая русификация таймера, плюс описание всех параметров на русском.

    6. Микросекунды показываются только за 15 минут до конца отсчета. (Например вы поставили таймер на 30 минут, в этом случае пользователь увидит отсчет микросекунд за 15 минут до окончания)

    Сохранены все основные функции автора скрипта таймера.(перенаправление на url, несколько таймеров на страницу, и другие фишки)

    Желающие получить такой таймер - пишите colorit-l@yandex.ru.

  29. Я бы хотел узнать, возможно ли переделать этот таймер. Мне нужен таймер который бы мог отсчитывать заданное время после чего опять начинал отсчёт заного. Почему? У меня есть сайт и у нас есть офис, мы хотим сделать так что бы с боку сайта показывало ну допустим "офис открыт до закрытия: (и обратный отсчёт" и после того как вот таймер достигнет 00:00:00 чтобы он опять рестартился и чтобы опять отсчёт шёл но уже с другими текстами например: "офис закрыт до открытия: (и обратный отсчёт)". Можно это осуществить? Весь гугл проверил ничего не нашёл. Пожалуйста помогите!

  30. Вообще не пойму как его установить. Помогите, кто уже себе поставил. Сайт делала сама на html.
    help me!

  31. Добрый день! Не подскажете как добавить ноль(0) перед днями,часами,минутами,секундами что бы 01:08:06:07 так было.

  32. Система DLE 10.2. Вживил ваш счетчик в каталог. Какие открытия: Один код на странице (если вставить в футер) обрабатывается терпимо, но если к каждому товару проставить свои значения, то страница грузится раз в 10 дольше. Вывод - скрипт, конечно, классный и работать с ним удобно, но жутко тяжелый. К пожеланиям на будущее: ускорить время загрузки.

  33. Всем привет! Красивый таймер, хотел бы себе поставить, только у меня сайт через конструкторский сайт создан (Lpgenerator.ru), поэтому есть возможность только html код вставить. Конструктор HTML (Lpgenerator.ru) позволяет использовать JavaScript.
    Можете скинуть процесс установки ?

  34. Добрый день! Как добавить данный автоматический таймер (что бы каждый день показывался заново), не обновляя самому на свой сайт, сделанный через сервис Lpgenerator.ru Там есть возможность вставлять html код.
    Спасибо, жду вашего ответа!

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

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

    Просто СУПЕР, большое спасибо, за прекрасный скрипт.

    У меня такой вопрос, щас миллисекунды идут трехзначные, а можно сделать, чтоб было не 3 , а 2 цифры?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>