以毫秒为单位创建倒数计时器

时间:2012-04-11 19:24:44

标签: javascript jquery

我正在尝试创建一个以年,月,日,小时,分钟,秒和毫秒计数的计时器。我在网上找到了一些指南,但它们有点不容易理解,或者不用毫秒。任何人都可以帮助我做这样的事情,例如,这个星期五13:30。

所以它可以读0y 0m 2d 2h 11m 50ms

并倒数毫秒。我会展示代码来证明我实际上已经尝试过这样做,但这一切都失败了,以至于我会感到尴尬。

我还阅读this article,这让我对javascript计时器有点不信任。这是真的吗,他们变成了so out of sync

感谢您的帮助!

2 个答案:

答案 0 :(得分:6)

取决于您如何实施它。

如果您读取时间一次并依赖于setInterval或/和setTimeout来获得准确度,那么是......它们可能会不同步。

如果您总是在计算中获得当前使用的时间,那么它可能会失去同步,就像系统的其余部分不同步一样......这意味着它遵循计算机的时钟。

JavaScript / jQuery Countdown改变我的答案,加上你得到的毫秒数

var end = new Date('13 Apr 2012 13:30:00');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       // handle expiry here..
       clearInterval( timer ); // stop the timer from continuing ..
       //alert('Expired'); // alert a message that the timer has expired..
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );
    var milliseconds = distance % _second;

    var countdownElement = document.getElementById('timer');
    countdownElement.innerHTML = days  + 'd ' +
                                 hours + 'h ' +
                                 minutes + 'm ' +
                                 seconds + 's ' +
                                 milliseconds + 'ms';
}

timer = setInterval(showRemaining, 10);

但它并不处理月份和年份,因为需要更复杂的计算才能计算28-31天和闰年...

http://jsfiddle.net/TaHtz/2/

演示

答案 1 :(得分:1)

试试这个js小提琴:http://jsfiddle.net/QH6X8/185/

使用JavaScript第一行定义的end变量设置结束日期。

如果您不想每1毫秒更新一次,那么这里每隔60都会更新一次jsfiddle:http://jsfiddle.net/QH6X8/187/