Таймер обратного отсчета, в т.ч. до Нового Года

Таймер обратного отсчета является довольно простой и классической задачей для javascript.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script language="JavaScript" type="text/javascript">
function count() {
 
month = 'Jan';      // Месяц даты наступления события
date = '01';        // Число даты наступления события
year = '2006';      // Год даты наступления события
 
theDate = month + ' ' + date + ' ' + year;
 
  now = new Date();
  setdate = new Date(theDate);
 
  timer = (setdate - now) / 1000 / 60 / 60 / 24;
  timer = Math.round(timer);
 
var message = timer + " дней до вашей даты!";                 // Текст сообщения на ваш вкус
if (timer == "1") message = timer + " сообытие через день";   // До события один день
if (timer == "0") message = "событие менее чем через день";   // До события менее одного дня
if (timer == "-1") message = "событие наступило";             // Событие наступило
if (timer < "-1") message = "";                               // Строка нулевой длины после наступления события
 
document.write(message);
}
count();
</script>

Вариант с днями, часами, минутами и секундами (отсчет времени до наступления Нового Года):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script type="text/javascript">
function newYearIn()
{
    //var days=" дней "
    var now = new Date();
    var newYear = new Date("Jan,01,2013,00:00:00");
    var totalRemains = (newYear.getTime()-now.getTime());
    if (totalRemains>1)
    {
        var RemainsSec=(parseInt(totalRemains/1000));
          var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
        /*if (
            RemainsFullDays==2 ||
            RemainsFullDays==3 ||
            RemainsFullDays==4 ||
            RemainsFullDays==22 ||
            RemainsFullDays==23 ||
            RemainsFullDays==24 ||
            RemainsFullDays==32 ||
            RemainsFullDays==33 ||
            RemainsFullDays==34
            ) {
            days=" дня "
        }
        if (
            RemainsFullDays==1 ||
            RemainsFullDays==21 ||
            RemainsFullDays==31 
            ) {
            days=" день "
        }*/
          var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
          var RemainsFullHours=(parseInt(secInLastDay/3600));
          if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
          var secInLastHour=secInLastDay-RemainsFullHours*3600;
          var RemainsMinutes=(parseInt(secInLastHour/60));
          if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
          var lastSec=secInLastHour-RemainsMinutes*60;
          if (lastSec<10){lastSec="0"+lastSec};
        //document.getElementById('newyear').innerHTML = "<p style='font-size:22px;'>До Нового Года осталось: "+RemainsFullDays+days+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</p>";
          document.getElementById('newyear').innerHTML = "<p style='font-size:22px;'>До Нового Года осталось: "+RemainsFullDays+' '+incline(['день', 'дня', 'дней'], RemainsFullDays)+' '+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</p>";
          setTimeout("newYearIn()",10);
    } 
      else {document.getElementById("newyear").innerHTML = "C НОВЫМ ГОДОМ !!!";}
}
 
function incline(words,n){ // первый параметр -- 3-и варианта склонения существительного по правилу 1, 2, 5; второй -- сама переменная с числом
   return words[(n%100>4 && n%100<20)?2:[2,0,1,1,1,2][Math.min(n%10,5)]];
}
 
newYearIn();
</script>

Для того чтобы счетчик времени (таймер) до Нового Года появился на странице, необходимо до скрипта на странице расположить любой тег с id=»newyear», например:

<p id="newyear">Время, оставшееся до наступления Нового Года</p>
<script type="text/javascript">
function newYearIn()
{ ...

а в самом скрипте установить ту дату нового года, которую вы обычно празднуете (например, ближайший Новый Год в России: «Jan,01,2012,00:00:00»).

[UPD]: 1. Для того чтобы поменять шрифт (размер и цвет), нужно убрать теги <font size=20> и <font> и вставить описание стиля <style>p#newyear {font-size:27px; color:pink;}</style> для строки времени. 2. Для того чтобы разбить строку на две вставьте в нужное место строки «<br>», например так: «До Нового Года осталось: <br>»

[UPD2]: Еще один вариант счетчика до Нового Года на CSS3 описан на Хабре.

[UPD3]: Good news everyone, в общем на дворе 21-ый век, пора бы уж добавить в скрипт javascript-функцию склонения (incline) существительных. Обновил в во втором сверху («основном») примере с часами и минутами, прежний хардкод закомментирован и его можно удалить (оставил для истории).

Пример работы скрипта таймера до Нового Года:

Отсчет времени до Нового Года

Комментариев: 43

  • 28.05.2011 defrost:

    спасибо то что надо

  • 02.06.2011 ams779:

    Да только не понятно что и куда вставлять???

  • 31.07.2011 Fasol:

    Ну-ну, грамотеи... Сразу две грамматические ошибки :)

    До Нового Года осталось: 153 дней ...

    • 31.07.2011 Кирилл:

      Болдом писать все новости на главной тоже не айс ;) , но и то и то можно поправить.

  • 03.09.2011 Илья:

    Странно, но не работает в 8 IE. Нужно вбивать какой-нибудь хак или все должно норм пахать?

    • 03.09.2011 Кирилл:

      Привет Илья, только что проверил на своем ноуте в IE8 — вроде как счетчик на этой странице работает.

    • 29.11.2011 Константин:

      03.09.2011 Илья:

      Странно, но не работает в 8 IE. Нужно вбивать какой-нибудь хак или все должно норм пахать?

      Не работает из-за p style='font-size:22px;'

  • 23.10.2011 Анна:

    странно, вставила на сайт — счетчик появляется и сразу же через полсекунды исчезает

    • 24.10.2011 Кирилл:

      как вариант его может вырезать какой-нибудь плагин по отрезанию рекламы, в т.ч. сделанной из javascript, например для firefox это может быть плагин adblock plus

  • 05.11.2011 alex:

    кстати, вот нашел счетчик до нового года newyearcountdown.info/ru

    • 19.12.2011 Кирилл:

      Хм, весь сайт ради одного флэшевого счетчика? Занятно :)

  • 26.11.2011 Осведомлённый:

    Поставил себе и все работает razborydoca.ru

    Спасибо за код...

  • 08.12.2011 Александр:

    Cчетчик не универсальный, т.е. время отсчета берется с компьютера. А если у меня на компе время выставлено не правильно (тут я Новый год и проспал!)? Что и говорить... Чтобы счетчик в любом случае показывал правильное время надо его привязывать к серверному времени и тайм-зоне. А в конце счетчика указывать к чему он привязан, чтобы ориентироваться (например /МСК/).

  • 18.12.2011 loader:

    В IE попробуйте вместо Время, оставшееся до наступления Нового Года function newYearIn() { ...

    использовать function newYearIn() { ...

    вроде заработало

    • 19.12.2011 Кирилл:

      Пока что не понял суть идеи, может ее парсер комментов съел?

  • 20.12.2011 Виталий:

    Всем привет, классный счетчик!

    Спасибо автору!

    Но есть проблемка, под IE в Smarty работать не хочет, может кто что подскажет?

    Счетчик стоит в первой закладке слайдера, окружен {literal}...{/literal} как положено, ну иначе бы в остальных то же не работал...

    • 20.12.2011 Кирилл:

      Internet Explorer подсказывает в значке на статусной строке:

      Сообщение: Неизвестная ошибка выполнения

      Строка: 389

      Символ: 9

      это как раз начало этой строки кода:

      document.getElementById('newyear').innerHTML = "<p style='font-size:16px; color: red;'><b>До Нового Года осталось:<br /><br /><span style='font-size: 24px;'> "+RemainsFullDays+days+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</span></b></p>";

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


Добавление комментария:

 css.php