2010-07-27 75 views
0

寻找一个我可以理想的脚本输入一个起始数字和一个开始日期,然后根据我设置的速率继续增加。 1每秒。根据当前时间和开始时间之间的差异,该脚本将理想地计算应该在哪个数字上。jQuery或Javascript连续计数器(countup)

这意味着看起来像它显示一个活的计数。

理想的情况下,像柜台上http://sendgrid.com/

有没有人有一个链接或插件或解决方案,他们可以分享?

如果数字可以用数字的图像取代更好,但起点将不胜感激。

感谢

回答

1

如果你想有一个JavaScript的唯一的解决方案,你可以做这样一个div:

<div id="counter"></div> 

然后某处使用下面的脚本在页面上:

var START_DATE = new Date("July 27, 2010 13:30:00"); // put in the starting date here 
var INTERVAL = 1; // in seconds 
var INCREMENT = 2; // increase per tick 
var START_VALUE = 9001; // initial value when it's the start date 
var count = 0; 

window.onload = function() 
{ 
var msInterval = INTERVAL * 1000; 
var now = new Date(); 
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
document.getElementById('counter').innerHTML = count; 
setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval); 
} 

可以使用技术类似于获取图像的方法,或者您可以使用CSS对counter div进行样式设置。

+0

完美,谢谢:) – Lee 2010-07-28 15:38:28

5

也许你有一个页面,这个标记:

<div id='counter'><%= some_number_from_database_or_similar() %></div> 

所以你可以写一个这样的脚本:

var INTERVAL = 1; 

$(document).ready(function() { 
    var delay = INTERVAL * 1000; 
    var target = $('#counter'); 
    var counter = parseInt(target.text(), 10); 
    setInterval(function() { 
    target.text(counter++); 
    }, delay); 
}); 

这不是因为你完全准确不能确定这个函数每秒钟会被调用,正好是,但它会非常接近(你真的需要它的准确度有多高,无论如何?)。或者,您可以创建一个new Date()并获取它的时间戳,然后每隔一段时间创建一个,然后计算已经过去的实际秒数......看起来太昂贵而不值得。

至于使用图像的数字,你可以只改变间隔功能是这样的:

function() { 
    var counterString = (counter++).toString(); 
    var chunks = []; 
    for(var i = 0; i < counterString.length; i++) { 
    chunks.push("<img src='/images/numbers/" + counterString[i] + ".png' />"); 
    } 
    target.html(chunks.join('')); 
} 
+0

太棒了,谢谢。 虽然我想包括开始日期的原因取决于时间间隔,但如果用户返回第二天计数将高达100,000,然后第二天200,000等,准确性并不那么重要。因此,它看起来像实时数据,但它实际上是一个粗略的估计 – Lee 2010-07-27 16:22:41

+0

因此,您可以将'counter'变量设置为页面加载时的适当起点(通过php,rails等)。 – rfunduk 2010-07-27 17:00:23

+0

我会稍微更新我的答案以支持这一点。 – rfunduk 2010-07-27 17:01:07