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

Тема в разделе "Другие языки", создана пользователем terkin, 29 окт 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. terkin

    terkin

    Регистр.:
    9 дек 2006
    Сообщения:
    513
    Симпатии:
    162
    Есть такой скрипт который пишет сколько месяцев/дней/часов/минут осталось до определённой даты
    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>
    
    То работает только тот который был объявлен последним, в чём загвоздка? фаербаг вроде не ругается
     
  2. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
  3. terkin

    terkin

    Регистр.:
    9 дек 2006
    Сообщения:
    513
    Симпатии:
    162
    Неа, это решение не помогло, я полагаю что загвоздка не в этом, так как даже при ручном запуске таймеров(событием онклик на кнопке) обновление таймера идёт только последнего вызванного
     
  4. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    Попробуй сделать копии 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));
    };
    
     
  5. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    Ну это не решение вопроса. Что если человеку надо будет 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>
     
    terkin нравится это.
Статус темы:
Закрыта.