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>

这是一个很好的倒计时钟,我想在datalist中显示时间我该怎么做？比如在这个网站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的含义,其中500ms =½秒.

值得注意的另一件事是这里的代码显示小时数以及分钟数和秒数; 也就是说,HH:MM:SS.从毫秒开始计算小时,分钟和秒并不困难,但有点尴尬,让Date对象为您工作最简单.