1. JavaScript / Говнокод #13667

    +152

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18
    19. 19
    20. 20
    21. 21
    22. 22
    23. 23
    24. 24
    25. 25
    26. 26
    27. 27
    28. 28
    29. 29
    30. 30
    31. 31
    32. 32
    33. 33
    /* mootools javascript */
function animateCd() {
    $$('.countdown').each(function(el) {
        var inp = $(el).getElement('.ts');
        var time = +$(inp).get('text')-1;
        $(inp).set('text', time);
 
        var _time = Math.abs(time);
        var h = Math.floor(_time/3600);
        var _h = (h < 10 ? '0' : '') + h;
 
        var m = Math.floor(_time/60)-h*60;
        var _m = (m < 10 ? '0' : '') + m;
 
        var s = _time-(h*3600+m*60);
        var _s = (s < 10 ? '0' : '') + s;
 
        var timeStr = _h+' : '+_m+' : '+_s;
        if ( time < 0 ) {
            timeStr = '- '+timeStr;
        }
 
        $(el).getElement('.timer_cd').set('text', timeStr);
    });
    setTimeout(animateCd, 1000);
}
animateCd();

<!-- html -->
<div class="countdown">
    <div class="timer_cd"></div>
    <div style="display: none" class="ts">7200</div>
</div>

    "Для создания таймера будем отталкиваться от стартового времени указанного в секундах, в примере 7200 (2 часа). Сначала из скрытого блока <div style="display: none" class="ts">7200</div> вытягиваем текущее значение счетчика в секундах, декрементируем его и возвращаем туда новое значение. Потом разбиваем значение счетчика на часы, минуты и секунды, при этом формируя значения в двухзначном формате. Собираем все в кучу и вставляем полученную строку в блок <div class="timer_cd"></div>. Данную операцию повторяем раз в секунду setTimeout(animateCd, 1000);."
    http://webbystep.ru/all-posts/16-js-clock/

    Запостил: psycho-coder, 26 Августа 2013

    Комментарии (12) RSS

    • ava 1024-- 26.08.2013 14:03 # +3

      Интересно, на какие значения этот таймер расходится с системным временем в реальных условиях.
      Ответить

      • ava kegdan 26.08.2013 14:07 # +1

        на время операции в секунду.
        Ответить

        • ava 1024-- 26.08.2013 14:28 # +2

          > на время операции в секунду
          Если подразумевается работа этого кода и перерисовка, то смею уведомить Вас, что всё очень плохо.
          Скажем, если в хроме переключаться на другие вкладки, то выйдет совсем грустно:
          Elapsed time: this=0 real=0.002 timer.html:34
Elapsed time: this=60 real=74.44 timer.html:34
Elapsed time: this=120 real=164.1 timer.html:34
Elapsed time: this=180 real=246.1 timer.html:34
Elapsed time: this=240 real=326.392 timer.html:34
Elapsed time: this=300 real=386.428
          Ответить

          • ava kegdan 26.08.2013 14:33 # +2

            Приоритет потока неактивной вкладки очень низок, поэтому такие расхождения.
            Ответить

    • ava psycho-coder 26.08.2013 14:40 # +1

      Смог только это из себя выдавить
      function echo(text){document.getElementById('text').innerHTML=text;}
var left = 7200000;
var d = new Date(left);
echo(d.getUTCHours() + ':' + d.getMinutes() + ':' + d.getSeconds());
var id = setInterval(function(){
	if (left > 0){
        left -= 1000;
        d = new Date(left);
        echo(d.getUTCHours() + ':' + d.getMinutes() + ':' + d.getSeconds());
    } else {
        clearInterval(id);
        return;
    }
}, 1000);

      Но тут, наверно, все еще ужасней.
      http://jsfiddle.net/ZT8tv/
      Ответить

      • ava 1024-- 26.08.2013 15:13 # +3

        Ваши left -= 1000; d = new Date(left); не требуются. Надо запомнить время в самом начале и плясать от него.
        // инициализация:
var startTime = +new Date, timeToCount = 7200000;
// в итерациях таймера:
var timeToShow = timeToCount + startTime - new Date;
// далее делаем с timeToShow всё, что хотим
        Ответить

        • ava psycho-coder 26.08.2013 15:15 # +1

          Думал в этом направлении, но не знал как это делается.
          Ответить

          • ava kegdan 26.08.2013 15:33 # +2

            А вдругом направлении только говно выходит
            Ответить

      • ava 1024-- 26.08.2013 16:39 # +2

        Можно ещё как-то так, но это всё ещё говнокод:
        function setTimer(time, element){
  var startTime = +new Date;
  time *= 1000;
  function echo(text){ element.innerText = text; }
  function update(){
    var timeToShow = time + startTime - new Date;
    echo((new Date(timeToShow + 61200000)).toLocaleTimeString());
    if(timeToShow < 0){
      echo('Опасносте!');
      clearInterval(interval);
    }
  }
  update();
  var interval = setInterval(update, 1000);
}

// вызывать как:
setTimer(60, document.getElementById('countdown'));
// или Array.prototype.forEach.call(document.getElementsByClassName('countdown'), setTimer.bind(this, 60));


        http://jsfiddle.net/HZZfr/
        Ответить

        • ava 1024-- 26.08.2013 16:48 # +2

          Это, кстати, знатный говнокодец, поскольку работает он по-видимому, только в одной зоне :)
          Ответить

        • ava 1024-- 26.08.2013 17:32 # +2

          http://jsfiddle.net/HZZfr/1/
          Попробовал вычислить сдвиг на следующий день (shift) с помощью
          d = new Date, shift = (24 + d.getUTCHours() - d.getHours()) * 3600000
          Теперь мой код работает в большем количестве случаев...
          Всё же, даты в моих руках - зло.
          Ответить

          • ava psycho-coder 27.08.2013 11:32 # +2

            Заканчивай уже. И вымой руки.
            Взял первый вариант твой.
            Ответить

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