(多个) jQuery 计数的问题

Problems with (multiple) jQuery count up

我现在正在计算。目标是在页面上显示多个计数。一个 interval() 的计数没有问题,但是当它达到两个或更多个计数时,它只会显示最后一个计数。

计数结构:

Jsfiddle.net

希望你能帮帮我。

您正在寻找这样的东西吗?:

<div class="countup" value="jan,01,2014,00:00:00"></div>
<div class="countup" value="feb,05,2015,13:00:00"></div>

function upTime(element) {
    now = new Date();
    countTo = new Date(element.getAttribute("value"));
    difference = (now-countTo);

    days=Math.floor(difference/(60*60*1000*24)*1);
    hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
    mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

    element.innerHTML =  "It's been " + days + " days " + hours + " hours " + mins + " minutes " + secs + " seconds";

    setTimeout(function(){ upTime(element); },1000);
}

var elements = document.getElementsByClassName("countup");
for (var i = 0; i < elements.length; i += 1) {
    upTime(elements[i]);
}

jsFiddle: http://jsfiddle.net/6f6c8z4a/1/

输出:

It's been 405 days 13 hours 58 minutes 43 seconds
It's been 5 days 0 hours 58 minutes 43 seconds

需要注意的一件事是 setTimeout(.., 1000) 不是每秒 运行 编码的可靠方法,因为 setTimeout 尽了 最大努力 .在实践中,计时器会很快开始倾斜。您可以考虑 运行更频繁地执行此代码(每 100 毫秒),或者您可以忽略偏差。