(多个）jQuery的问题会增加

Problems with (multiple) jQuery count up

本文关键字：问题 增加 jQuery 多个      更新时间：2023-09-26

我现在正在进行计数。目标是在一个页面上显示多个计数。一个带interval（）的计数不是问题，但当它达到两个或多个计数时，它将只显示最后一个计数。

计数结构：

  • 从<div value"....."> <div> 获取unix时间戳

    示例：<div id=countup value"jan,01,2015, 00:00:00"> <div>

  • 使用jQuery将unix时间戳变成一个不错的倒计时。

  • 使用.html()或.text() 显示页面上的所有计数

Jsfidle.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毫秒），也可以忽略偏斜。

相关文章：