Красивый таймер обратного отсчета на jQuery

Апрель 15, 2013   Александр Маврин   90 комментариев

Таймер обратного отсчета

Здравствуйте, дорогие читатели. Разгребая неотсортированные файлы на компьютере, обнаружил очень красивый таймер обратного отсчета на jQuery. Даже не помню где я его взял, а уж тем более когда. Но штука очень красивая. Таймер обратного отсчета используются в основном на продающих страницах, для стимулирования потенциальных покупателей, делая ограничение по времени. Подобные таймеры можно использовать и на страницах-заглушках. когда сайт закрыт на обслуживание, можно вывести этот таймер, чтобы пользователь знал, через какое количество времени сайт заработает.

Демо

Как уже писал выше, таймер обратного отсчета работает на jQuery. Это означает, что к сайту необходимо подключить специальный скрипт.  Скачайте таймер, распакуйте и посмотрите, какие файлы находятся в папке. в папке js имеются 2 файла, которые нужно подключить к сайту примерно таким образом. Ваш путь к файлам может быть другим.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

В таймере используются CSS спрайты. Учитывайте все пути файлов, возможно их придется изменить для полноценной работы этого скрипта. Так же есть 2 файла стилей, которые в итоге можно объединить в один или же скопировать из них необходимые стили для таймера и вставить в основной файл таблицы стилей. Для того, чтобы вставить таймер обратного отсчета на страницу в то место, где вы хотите его видеть,нужно вставить этот блок и отредактировать сам таймер на то время. которое вам нужно.

1
2
3
4
5
6
7
<div class="time">
<em class="clock"></em>
<div class="c-block c-block-3"><div class="bl-inner"><span>10</span></div> <span class="etitle etitle-1">дней</span></div>
<div class="c-block c-block-2"><div class="bl-inner"><span>10</span></div> <span class="etitle etitle-2">часов</span></div> 
<div class="c-block c-block-2"><div class="bl-inner"><span>10</span></div> <span class="etitle etitle-3">минут</span></div>
<div class="c-block c-block-2"><div class="bl-inner"><span>5</span></div> <span class="etitle etitle-4">секунд</span></div>
</div>


Редактируем счетчик времени.

<span>10</span> /* Устанавливаем дни*/
<span>20</span> /* Часы */
<span>15</span> /* Минуты */
<span>18</span> /* Секунды */


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
 var currentyear=new Date().getFullYear();
 var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1 ; 
 var christmas="january 1, "+thischristmasyear+" 0:0:00";
 var currentTime=new Date();
 var targetdate=new Date(christmas);  		
 var timediff=(targetdate-currentTime)/1000;
 var oneMinute=60;
 var oneHour=60*60;
 var oneDay=60*60*24;
 var dayfield=Math.floor(timediff/oneDay);
 var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
 var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
 var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
 $(function(){
 $('.c-block:eq(0) .bl-inner span').text(dayfield);
 $('.c-block:eq(1) .bl-inner span').text(hourfield);
 $('.c-block:eq(2) .bl-inner span').text(minutefield);
 $('.c-block:eq(3) .bl-inner span').text(secondfield);
 });
</script>


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

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


90 комментариев
  1. Анатолий:

    Здравствуйте.
    Спасибо за скрипт! Отличный вариант для проведения акций на сайте. Перерыл много вариантов, Ваш понравился больше!

    Спасибо!

  2. Олег:

    Здравствуйте, можете подробно описать как это прикрутить к своей html странице, заранее благодарен..

  3. Самир Гадельшин:

    Здравствуйте, Александр! Отличный урок! У меня получилось разместить таймер на своем сайте, но случилось вот что. Теперь весь сайт(картинки, видео и сам таймер) выравнены по левому краю. В чем проблема? Помогите, пожалуйста! могу скинуть скрины

  4. Вася:

    Не могу поменять дату на нужную , всегда стоит 216 дней откуда она берется и как мне поставить нужную мне дату.
    области
    10 /* Устанавливаем дни*/
    20 /* Часы */
    15 /* Минуты */
    18 /* Секунды */
    при их редактировании не меняю ничего

  5. Вася:

    если поменять к примеру на
    var christmas=»may 31, «+thischristmasyear+» 0:0:00″;
    получается 366 дней , когда должно быть 2 дня

  6. Вася:

    Спасибо вам огромное Александр !

  7. Сергей:

    А как сделать циклический отсчёт на 2 дня? То есть отсчитал 2 дня и заново запустился.
    P. S. Спасибо! Счётчик класс.

    • Артем:

      Щоб зробити циклічно на два дня слід в коді: christmas=»January 1, «+thischristmasyear+» 0:0:00″;

      замість «.. 1 ..» вставити наступний код:
      «+((new Date().getDate())+2)+»

      Що робить код — він дістає з діючої дати число дня місяця і приплюсовує до нього 2. Тепер кожного дня з 12 ночі лічильник буде ставитись на 2 дня. 😉

  8. Вова:

    Куда вставляется

    ?

  9. Кирилл:

    Такой же вопрос как и у Сергея
    А как сделать циклический отсчёт на 2 дня? То есть отсчитал 2 дня и заново запустился.
    P. S. Спасибо! Счётчик класс.

  10. Кирилл:

    или хотябы что бы счётчик обновлялся вместе со страницей?
    т.е человек зашёл а ему каждый раз новый отсчёт…

    я в программировании не бум бум, и синтаксиса не знаю…
    Как я понял берётся текущая дата и дата установленная вручную…может как то можно написать, что бы конечная дата была равна «текущая + 7 часов например»
    у пользователя всегда будет меняться текущая дата…и значит отсчёт будет продливаться

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

  11. Кирилл:

    Убрал код из тела страницы. теперь счётчик сбрасывается при обновлении. Но возник вопрос, как настроить время счётчика? Поставить например 5 часов, 43 минуты, 13 секунд
    js/main.js в конце строчка
    cf_draw(parseInt($(‘span’, this).text(), 10), parseInt($(‘span’, this).text(), 7), canvas, 10);

    вот меняю то значение где сейчас 7..на счётчики все цифры становятся семёрками (7 часов, 7 минут и т.п) а нужно например 5 часов, 43 минуты, 13 секунд

  12. Кирилл:

    Этот код вставляется в head если нужно что бы таймер не сбрасывался..а мне нужно что бы сбрасывался…я код не размещал этот…

  13. Анатолий:

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

  14. Анатолий:

    Сам разобрался)

  15. Толян:

    В langing page необходимо установить два таких одинаковых счетчика. Возникла проблема — счетчики имеют разные показатели, и у одного из них секунды не анимируются. в чем может быть проблема?

  16. Толян:

    sibarit.pusku.com/

  17. Установил тамер, но пришлось попотеть.
    Там такая история, если папка с картинками находится не в каталоге с index.php то таймер не считает, что-бы он работал, необходимо в одной из последних строк строке main.js указать правильный путь к картинке

    У меня получилось так
    image.attr(‘src’, ‘/themes/uggi/css/i/sprites.png’);

  18. Антон:

    Помогите сделать этот счетчик циклическим, как просил Сергей, мне тоже это нужно.

    • Пока не знаю как это сделать.

    • Евгений:

      Просто удалить:
      «$(‘.c-block:eq(0) .bl-inner span’).text(dayfield);»
      И
      «43 дней»
      Задать время 48 часов,минут, сек..

    • Сергей:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      
       var currentyear=new Date().getFullYear();
       var thischristmasyear=(new Date().getMonth()==0 &amp;&amp; new Date().getDate()==1)? currentyear : currentyear + 0 ; 
       var christmas="february 10, "+thischristmasyear+" 0:0:00";
       var currentTime=new Date();
       var targetdate=new Date(christmas);  		
       var timediff=(targetdate-currentTime)/1000;
       var oneMinute=60;
       var oneHour=60*60;
       var oneDay=60*60*24;
       var dayfield=Math.floor(timediff/oneDay);
       var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
       var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
       var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
       $(function(){
       $('.c-block:eq(0) .bl-inner span').text(dayfield);
       $('.c-block:eq(1) .bl-inner span').text(hourfield);
       $('.c-block:eq(2) .bl-inner span').text(minutefield);
       $('.c-block:eq(3) .bl-inner span').text(secondfield);
       });

      Вот код для того чтоб счетчик был цыкличным и не скидывался.
      Там, где написано: var christmas=»february 10, Меняете на месяц и число которое вам нужно и счетчик будет до этого числа отсчитывать.

  19. garif:

    Как можно уменьшить размер цифр таймера?

  20. garif:

    в общем-то мне нужно уменьши общий размер таймера

  21. 😈 Спасибо! Таймер реально красивый!
    Кроссбраузерность — отличная.
    Но IE10 не хочет отображать отсчет. ❓

    • А вот этого не знал. У меня 9 версия еще стоит.

      • Сергей:

        Сейчас попробовал на чистом index.php — работает.
        Но на сайте моем не в какую не хочет, и в шапку засовывал, и на главную, и подвал в IE не работает! Скорей всего верстка у меня сайта кривая

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

        • Толян:

          Сергей, а проверяете на локальном хосте или в инет залили а потом проверили? у меня на локальном верстка вообще в ie едет, а на нормальном хосте все корректно отображается, и счетчик этот уже на 5 лендов воткнул — все в ie работает

          • Сергей:

            У меня верстка кривовата, может блок один съезжает, из-за этого span canvas на таймере съезжает, но он не отображается нигде. если добавляю span ещё, то появляется отсчет в одном блоке, но от этого считает не правильно
            можете глянуть: vidsrtoy21(точка)ru
            у меня что и на локалхост, что и на хостинге

  22. Виталий:

    Скажите пожалуйста, а можно ли задать таймеру определённый часовой пояс?

  23. Сергей:

    Здравствуйте Александр. Подскажите как убрать ноль в поле «Дней», чтоб там было только 2 цыфры?

  24. Slaffko:

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

    • Сергей:

      На одну страницу можно поставить 2 счетчика! Я поставил и сделал чтоб они не скидывались после обновления страницы. Не чего там страшного нет и сложного тоже+ Толянова страница очень помогла)

  25. Сергей:

    Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать?

  26. Сергей:

    В Демки тоже самое!

  27. Сергей:

    Ребята нужна помощь! Год закончился и счетчик начал от счет заново! Т.е. он показывает 363 дня! Я не могу это убрать. Мне нужно чтоб он отсчитывал столько дней сколько мне нужно, например у меня акция 20-25 дней, а я не могу поставить 20 или 25 дней! Он просто отсчитывает дни до следующего года. Как это убрать? 😐

  28. Сергей:

    Если не трудно, напиши куда именно вставить 20?

  29. Андрей:

    Простой способ сделать несколько счетчиков на странице!
    Делаете отдельную страницу на которой кроме счетчика ничего не будет, а затем на своей странице втыкаете фреймы в те места где нужен счетчик и даете им ссылку на страницу со счетчиком(фрейм и будет показывать счетчик). Вот и все! =)

  30. Mix:

    Подскажите пожалуйста что сделать, где править! счетчик не начинает отсчет после установки на движок dle 10.0

    на черновике работает — все элементы на своих местах — после загрузки всех js. и css. все корректно кроме счетчика — форма есть а цифры не ведут отсчет (

  31. Владимир:

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

  32. Сергей:

    ❓ Как убрать дни?
    ❓ Зациклить таймер на 5 часов?
    ❓ После всего этого не сбивался при обновлении страницы?
    Я уже замучился экспериментировать, т.к. в программировании = 0.

  33. Копируйте код и устанавливайте на свой сайт в нужное место. Таймер обратного отсчета с необходимыми значениями появится у вас на сайте.

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

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