0

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

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

理想情况下，类似于http://sendgrid.com/上的柜台

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

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

谢谢

4

3 回答 3

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('') );
}
于 2010-07-27T15:07:07.120 回答
3

您可以自己构建它，也可以只使用这个插件。那里有一个计数。

于 2010-07-27T15:20:47.883 回答
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);
}

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

于 2010-07-27T17:41:13.880 回答