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 =½sec。

唯一值得注意的其他问题是这里的代码显示小时数以及分钟数和秒数;也就是说，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，其余的自己负责

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

这是我原来的解决方案，在SO的优秀人员的帮助下：Broken closure - please help me fix it

<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 />

javascript倒计时时钟

4 个答案: