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

Answer 2

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

Answer 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);
}

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

jQuery或Javascript连续计数器（计数）

3 个答案: