JavaScript обратный счётчик

terkin · 29 Окт 2008

Есть такой скрипт который пишет сколько месяцев/дней/часов/минут осталось до определённой даты

HTML:

<script type="text/javascript">

var Countdown =
{
  timer: null,
  init: function(id, until)
  {
    Countdown.node  = document.getElementById(id);
    Countdown.update(until);
    Countdown.timer = setInterval(function()
    {
      Countdown.update(until);
    }, 1000);
  },

  stop: function()
  {
    clearInterval(Countdown.timer);
    return true;
  },

  update: function(until)
  {

    var s = Countdown.process(new Date(), until);
    Countdown.node.innerHTML = s || Countdown.stop() && 'Всё :)';
  },

  difference: function(before, after)
  {
    if (after < before) return false;
    var
    days   = after.getDate()  - before.getDate(),
    months = after.getMonth() - before.getMonth(),
    years  = after.getYear()  - before.getYear(),
    hms    = (after / 1000 - before / 1000) % 86400,

    seconds = Math.floor(hms % 60),
    minutes = Math.floor(hms/60) % 60,
    hours   = Math.floor(hms/3600) % 60,

    date = new Date();

    if (days < 0)
    {
      date.setFullYear(before.getYear(), before.getMonth(), 32);
      days += 32 - date.getDate();
      months--;
    }

    if (months < 0)
    {
      months += 12;
      years--;
    }

    return {
      years:   years,
      months:  months,
      days:    days,

      hours:   hours,
      minutes: minutes,
      seconds: seconds
    };
  },

  process: function(before, after)
  {
    var diff = null, a = [], i = '';
    if(!(diff = Countdown.difference(before, after))) return false;

    for(i in diff)
    {
      if(!diff[i]) continue;
      a.push('<span class="num">'
              + diff[i] +
             '</span><span class="unit">'
              + Countdown.lang[i][Countdown.lang.choose( diff[i] )] +
             '</span>');
    }

    return a.join(' ');
  },

  lang:
  {
    years:   ['год', 'года', 'лет'],
    months:  ['месяц', 'месяца', 'месяцев'],
    days:    ['день', 'дня', 'дней'],
    hours:   ['час', 'часа', 'часов'],
    minutes: ['минута', 'минуты', 'минут'],
    seconds: ['секунда', 'секунды', 'секунд'],
    choose:  function(n)
    {
      var m = n % 100, i = 2;
      if(m < 5 || 20 < m)
      {
        if((m %= 10) === 1)
        {
          i = 0;
        }
        else if(1 < m && m < 5)
        {
          i = 1;
        }
      }
      return i;
    }
  }
};

window.onload = function()
{
  Countdown.init('countbox', new Date(2008, 10, 29, 1, 1, 00));
};

</script>
</head>
<body>
<span id="countbox"></span> 
</body>
</html>

Когда счётчик один на странице работает превосходно, а вот если попробывать создать несколько

HTML:

window.onload = function()
{
  Countdown.init('countbox1', new Date(2008, 10, 29, 1, 1, 00));
Countdown.init('countbox2', new Date(2008, 10, 29, 1, 1, 00));
};

</script>
</head>
<body>
<span id="countbox1"></span> 
<span id="countbox2"></span> 
</body>
</html>

То работает только тот который был объявлен последним, в чём загвоздка? фаербаг вроде не ругается

megadude · 29 Окт 2008

Загвоздка в том, что в ЯС нельзя привязывать таким способом несколько событий к onload

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

terkin · 29 Окт 2008

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

PHP_Master · 29 Окт 2008

Попробуй сделать копии Countdown и

Код:

window.onload = function()
{
  Countdown.init('countbox1', new Date(2008, 10, 29, 1, 1, 00));
Countdown2.init('countbox2', new Date(2008, 10, 29, 1, 1, 00));
};

megadude · 29 Окт 2008

PHP_Master написал(а):
Попробуй сделать копии Countdown и ...

Ну это не решение вопроса. Что если человеку надо будет 10 раз вывести на страницу счетчик? Множить скрипт 10 раз?

Вот рабочий вариант:

HTML:

<html>
  <head>
    <title>JS Clock</title>
    <script type="text/javascript">
    function countdown_clock(id, year, month, day, hour, minute, format) {
       html_code  = '<div id="countdown' + id + '"></div><br>';
       html_code += '<div id="countdown' + id + '"></div>';
    
       document.write(html_code);
     
       countdown(id, year, month, day, hour, minute, format);                
    }
             
    function countdown(id, year, month, day, hour, minute, format) {
       Today = new Date();
       Todays_Year = Today.getFullYear() - 2000;
       Todays_Month = Today.getMonth();                  
       
       Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), 
                               Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();                                 
       Target_Date = (new Date(year, month - 1, day, hour, minute, 00)).getTime();                  
       
       Time_Left = Math.round((Target_Date - Todays_Date) / 1000);
       
       if(Time_Left < 0)
          Time_Left = 0;
       
       switch(format) {
         case 0:
              document.all.countdown.innerHTML = Time_Left + ' seconds';
              break;
         case 1:
              days = Math.floor(Time_Left / (60 * 60 * 24));
              Time_Left %= (60 * 60 * 24);
              hours = Math.floor(Time_Left / (60 * 60));
              Time_Left %= (60 * 60);
              minutes = Math.floor(Time_Left / 60);
              Time_Left %= 60;
              seconds = Time_Left;
              
              dps = 's'; hps = 's'; mps = 's'; sps = 's';

              if(days == 1) dps ='';
              if(hours == 1) hps ='';
              if(minutes == 1) mps ='';
              if(seconds == 1) sps ='';
              
              elem = document.getElementById("countdown" + id);
              elem.innerHTML = days + ' day' + dps + ' ';
              elem.innerHTML += hours + ' hour' + hps + ' ';
              elem.innerHTML += minutes + ' minute' + mps + ' and ';
              elem.innerHTML += seconds + ' second' + sps;
              break;
         default: 
              elem.innerHTML = Time_Left + ' seconds';
       }
             
       setTimeout('countdown(' + id + ',' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
    }
    </script>
  </head>
  <body>
    <script type="text/javascript">countdown_clock(1, 08, 12, 25, 00, 00, 1);</script>
    <script type="text/javascript">countdown_clock(2, 08, 12, 25, 00, 00, 1);</script>
  </body>
</html>

JavaScript обратный счётчик

terkin

Мой дом здесь!

megadude

Гуру форума

terkin

Мой дом здесь!

PHP_Master

Хранитель порядка

megadude

Гуру форума