jQuery 或 Javascript 连续计数器 (countup)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3344940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery or Javascript continuous counter (countup)
提问by Lee
Looking for a script that I can ideally enter a starting number and a start date, which then continues to increment based on a rate I set e.g. 1 per second. The script would ideally calculate what number it should be on based on the difference between the current time and start time.
寻找一个脚本，我可以理想地输入一个开始数字和一个开始日期，然后根据我设置的速率继续增加，例如 1 per second。理想情况下，脚本会根据当前时间和开始时间之间的差异来计算它应该基于的数字。
It's meant to look like it's showing a live count.
它看起来像是在显示实时计数。
Ideally, something like the counter on http://sendgrid.com/
理想情况下，类似于http://sendgrid.com/上的计数器
Has anyone got a link or plugin or solution they can share?
有没有人有可以分享的链接或插件或解决方案？
If the numbers can be replaced with images of numbers even better, but a starting point would be much appreciated.
如果数字可以用数字图像替换更好，但一个起点将不胜感激。
Thanks
谢谢
回答by rfunduk
Maybe you have a page with this markup:
也许您有一个带有此标记的页面：
<div id='counter'><%= some_number_from_database_or_similar() %></div>
And so you could write a script like this:
所以你可以写一个这样的脚本：
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 );
} );
This isn't entirely accurate since you can't be sure the function will get called exactlyonce every second, but it'll be pretty close (and how accurate do you really need it to be, anyway?). Alternatively you could create a new Date()and get it's timestamp, then create another one every interval and just calculate the number of actual seconds that have passed... Seems too expensive to be worth it.
这是不完全准确的，因为你不能确定该函数将被调用恰好每秒一次，但它会很接近（以及如何准确，你真的需要它，反正？）。或者，您可以创建一个new Date()并获取它的时间戳，然后在每个间隔创建另一个，然后计算已经过去的实际秒数......似乎太昂贵了，不值得。
As far as using images for the numbers, you could just change the interval function to be something like:
至于使用图像作为数字，您可以将间隔函数更改为：
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('') );
}
回答by Reigel
回答by Andrew
If you want a javascript only solution, you can just make a div like this:
如果你想要一个只有 javascript 的解决方案，你可以像这样制作一个 div：
<div id="counter"></div>
And then use the following script somewhere on the page:
然后在页面上的某处使用以下脚本：
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);
}
You can use a technique similar to that of thenduks to get images, or you could just style the counter div with CSS.
您可以使用类似于 nduks 的技术来获取图像，或者您可以仅使用 CSS 设置计数器 div 的样式。
