jQuery 或 Javascript 连续计数器（countup）答案

【问题标题】：jQuery or Javascript continuous counter (countup)jQuery 或 Javascript 连续计数器（countup）
【发布时间】：2010-07-27 15:00:48
【问题描述】：

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

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

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

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

如果可以将数字替换为数字图像就更好了，但我们将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery counter

【解决方案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('') );
}

【讨论】：

太棒了，谢谢。尽管我想包含开始日期的原因取决于时间间隔，但准确性并不那么重要，如果用户在第二天返回，则计数将高达 100,000，然后是第二天 200,000，依此类推。所以它看起来像实时数据，但实际上是一个粗略的估计
因此，您只需将 counter 变量设置为页面加载时的适当起点（通过您的 php、rails 等）。

【解决方案2】：

您可以自己构建它或只需使用此plugin。那里有一个countup。

【讨论】：

【解决方案3】：

如果你想要一个只有 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);
}

您可以使用类似于 thenduks 的技术来获取图像，或者您可以只使用 CSS 设置计数器 div 的样式。

【讨论】：