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 毫秒 = ½ 秒。

唯一值得注意的是，这里的代码显示小时以及分钟和秒；即，HH:MM:SS。从毫秒计算小时、分钟和秒并不困难，但有点尴尬，最简单的方法是让 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 是您传递给函数的标记的 id。
因此 countdown('div1') 将在 id="div1" 的标记中显示计时器，

但是您的特定计时器不允许多个实例，并使用名为interval 的全局变量。

在服务器上生成 JSON，剩下的事情会自行处理，

这是一个更精确的 OO 版本，因为它只计算结束时间，而不是依赖于间隔，如果浏览器繁忙，间隔就会阻塞： http://jsbin.com/ujuzo5/edit

这是我在 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 />