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

Есть у меня один заказчик, который делает страницы продаж, где для стимуляции пишет "До конца акции осталось..." и таймер обратного отсчета. Причем, таймер может указывать как на конкретную дату/время, так и работать относительно, например, всегда считать время до конца следующего дня, как этот:

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

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

Возможности JavaScript таймера обратного отсчета:

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

  • кроссбраузерность (FireFox, Chrome, Opera, Safari, IE 7-9;
  • гибкая стилизация (менять цвета, шрифты, размеры);
  • таймер находится в блочном DIV элементе, может быть интегрирован в качестве плавающего блока или спозиционирован абсолютно;
  • гибкие настройки финальной точки обратного отсчета;
  • возможность задать редирект по истечению времени на таймере с таймаутом показа страницы.

Посмотреть уже готовые стили таймера.

Скачать JavaScript таймер обратного отсчета (ZIP, 180kb).

Настройки таймера находятся в файле: ./web/s/cdtimer.js

var month = '0';
var day = '+1';
var hour = 23;
var tz = 0;
var lab = 'cdtimer';
var msg = 'Sorry, you are too late…';
var url = 'http://www.google.com/';
var sec = 0;

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

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

Настройки переадресации

url — URL адрес;
sec — через сколько секунд после показа страницы;
Чтобы отключить переадресацию, надо установить url='' или sec=0.

P.S.: В мобильных браузерах тоже работает, вот, к примеру, Chrome на моем смартфоне Samsung Galaxy Note (N7000):

Таймер в браузере мобильного телефона

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



31 комментариев к “Бесплатный JavaScript таймер обратного отсчета

    • Нет, так можно указывать только дни.
      Если вы хотите чтобы таймер показывал как можно меньше времени, установите его на конец пика посещаемости вашего ресурса, скажем, на 9 часов вечера. Тогда большинство людей будут видеть остаток времени менее 6-7 часов.
      В принципе, любой человек знающий JavaScript сможет без проблем добавить "+N" для указания времени. Код таймера довольно простой.

  1. Как запустить таймер на странице в нескольких местах? Есть простое решение?

  2. Всем привет! Красивый таймер, хотел бы себе поставить, только у меня сайт через конструкторский сайт создан, поэтому есть возможность только html код вставить. Можете скинуть такой?

  3. Максим, огромное СПАСИБО за скрипт, очень понравился! Все красиво, особенно порадовало такое большое количество стилей. Под любой дизайн можно подобрать! Это пожалуй один из лучших таймеров что я перепробовал.

  4. Здравствуйте. Почему-то не работает переадресация, после того как таймер закончит считать...

  5. Добрый день. Скажите где изменить код? Хочу чтобы отображалось на экране вместо day другие символы.

    • В файле: web/s/mutimer.js найдите строки:

              var t = '';
              t += '<div class="days">'+days+'<span>Day'+(days == 1 ? '' : 's')+'</span></div>';
              t += '<div class="clock">';
              t += '    <div class="hr">'+hours+'<span>hours</span></div>';
              t += '    <div class="min">'+mins+'<span>minutes</span></div>';
              t += '    <div class="sec">'+secs+'<span>seconds</span></div>';
              t += '    <div class="ms" id="'+config.lab+'-ms">000<span>msec</span></div>';
              t += '</div>';
              config.timer.innerHTML = t;
      

      Они отвечают за вывод таймера.
      Можете изменить "Days", "hours", "minutes", "seconds" и "msec" на свои надписи.
      Спасибо за идею, в следующей версии вынесу их в настройки.

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

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

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

  8. Максим, спасибо. Очень хороший счетчик и работоспособен во многих браузерах. Причем доступен в настройке и новичкам.

    • У вас на странице много скриптов, вероятно возник конфликт в одним из них.
      К сожалению, когда я смотрел, то скрипта не увидел, чтобы сказать точно.
      Попробуйте более новую версию таймера:
      http://frontcamp.com/2013/02/01/free-javascript-countdown-mu-timer-10/
      (на jQuery, думаю, должно вам помочь)

      • Делаю ту самую продающую страницу, как один Ваш заказчик. И долго искал счетчик с автозапуском после окончания отсчета. Большое Вам спасибо. Смущает только одно - нам в основном нужен вот такой дизайн: http://******.ru/
        Это как-то возможно реализовать?
        Ну и еще раз простите "чайника" - если возможно будет бросте мануал пошаговый: "1. Залить в корень хостинга ... 2. В папке ... в файле ... - установить ... значение = ..." ну и в таком духе. Этим Вы нанесёте непоправимое добро! Которое к Вам обязательно вернётся! И благодарность тысяч "чайников" - тоже!

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

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

  11. Если задаешь сегодняшний день, то таймер не работает. Можно ли как - то это поправить?

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

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

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

    • Куки не используются. В этом нет смысла, т.к. он рассчитан на мгновенные страницы продаж. Человек или купил товар или нет. Предполагается, что он больше на эту страницу не вернется.

  15. Максим. Я не поняла, где же с находится скрипт таймера. И как менять время? Спасибо

    • В статье есть ссылка: "Скачать JavaScript таймер обратного отсчета (ZIP, 180kb)." По ней клацните и вы скачаете ZIP архив, в котором находятся все необходимые файлы.

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

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

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

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