часы обратного отсчета JavaScript

Question

 <script>
var interval;
var minutes = 1;
var seconds = 5;
window.onload = function() {
    countdown('countdown');
}

function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element);
        if(seconds == 0) {
            if(minutes == 0) {
                el.innerHTML = "countdown's over!";                    
                clearInterval(interval);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
        seconds--;
    }, 1000);
}
</script>

это хорошие часы обратного отсчета, и я хочу показать время в списке данных, как мне это сделать?как на этом сайте www.1buy1.co.il

Answer 1

Ответы, которые я вижу здесь, работают довольно хорошо, но не совсем строго. Хотя setInterval () кажется подходящей для использования функцией, с течением времени она страдает от небольшого «отклонения». Кроме того, если для выполнения какой-либо другой функции JavaScript требуется секунда или более, ваши часы обратного отсчета могут остановиться и показать неправильное время.

Хотя эти случаи могут быть маловероятными, повышение точности на самом деле не сложнее. То, что вы хотите, это таймер, который возвращает часы от любой неточности. Вам нужно будет рассчитывать время по системным часам, а не по частоте временных интервалов, и для этого вам придется отказаться от setInterval () в пользу серии вызовов setTimeout (). Следующий код показывает, как.

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "countdown's over!";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) +
                ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

Попробуйте: http://jsfiddle.net/mrwilk/qVuHW

Если ваши часы случайно выровнены очень близко к секундам системных часов, ваш таймер обратного отсчета может показаться «пропущенным» из-за получения событий тайм-аута немного раньше или чуть позже одного секунды. Решение состоит в том, чтобы выровнять ваши события на полсекунды; то есть посередине между ударами секунд системных часов. То, что делают 500 в коде, где 500мс = ½сек.

Единственное, на что стоит обратить внимание, это то, что здесь код отображает часы, а также минуты и секунды; то есть ЧЧ: ММ: СС. Вычислить часы, минуты и секунды из миллисекунд не сложно, но немного неудобно, и проще всего позволить объекту Date сделать эту работу за вас.

Answer 2

Я убрал приведенный выше код и сделал его формат, как в вашем примере.Он также удаляет глобальные переменные и позволяет создавать несколько таймеров.

Здесь есть прямая ссылка http://jsfiddle.net/Apnu2/6/

countdown('countdown', 1, 5);
function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter
        if(time == 0) {
            el.innerHTML = "countdown's over!";    
            clearInterval(interval);
            return;
        }
        var minutes = Math.floor( time / 60 );
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        time--;
    }, 1000);
}

Answer 3

                            <script>
            var s=3600;
            var h=Math.floor(s/3600);
            var m=Math.floor((s%3600)/60);
            var sec=(s%60);
            window.clearInterval(x);
            function clock()
            {
             if(m!=0)
             if(sec==0){
             m=m-1; sec=59;} 
             if(h!=0)
             if(m==0){
             h=h-1;m=59;
             sec=59;}
             if((m==0&&h==0&&sec==0))
             $(this).stop();
             --sec;
             var hr=(h<10? "0":"")+h;
             var minu=(m<10? "0":"")+m;
             var second=(sec<10? "0":"")+sec;
             document.getElementById("time").innerHTML=hr+":"+ minu +":"+second ;
            }
            var x=window.setInterval(clock,10);

            </script>

Answer 4

element в скрипте - это идентификатор тега, который вы передаете функции.
Так countdown('div1') покажет таймер в теге с id = "div1"

Однако ваш конкретный таймер не допускает нескольких экземпляров и использует глобальную переменную, называемую интервалом.

Создайте JSON на сервере, а остальное позаботится о себе

HERE - это более точная версия OO, поскольку она рассчитывает только время окончания, а не полагается на интервал, который будет блокироваться, если браузер занят:

И вот мое оригинальное решение с помощью хороших людей из SO здесь: Сломанное закрытие - пожалуйста, помогите мне исправить это

<script type="text/javascript">
// generate this on the server and note there is no comma after the last item
var counters = {
  "shoes":{"id":"shoe1","minutes":1,"seconds":5},
  "trousers":{"id":"trouser1","minutes":10,"seconds":0}
};

var intervals = {};

window.onload = function() {
  for (var el in counters) { countdown(counters[el]) };
}
function countdown(element) {
    var minutes = element.minutes;
    var seconds = element.seconds;

    intervals[element.id] = setInterval(function() {
        var el = document.getElementById(element.id);
        if(seconds == 0) {
            if(minutes == 0) {
                el.innerHTML = "countdown's over!";                    
                clearInterval(intervals[element.id]);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
        seconds--;
        // optionally update the member values
        element.minutes=minutes;
        element.seconds=seconds;
    }, 1000);
}

</script>
shoes: <span id="shoe1"></span><br />
trousers: <span id="trouser1"></span><br />