javascript - jQuery 或 Javascript 连续计数器(countup)

Question

正在寻找一个脚本，我可以理想地输入起始编号和开始日期，然后根据我设置的速率继续递增，例如每秒 1 次。理想情况下，脚本会根据当前时间和开始时间之间的差异来计算应该使用的数字。

它看起来像是在显示实时计数。

理想情况下，类似 http://sendgrid.com/ 上的计数器

有人有可以分享的链接、插件或解决方案吗？

如果可以用数字图像替换数字就更好了，但如果有一个起点，我们将不胜感激。

谢谢

Answer 1

也许您有一个带有此标记的页面:

<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('') );
}