寻找一个我可以理想的脚本输入一个起始数字和一个开始日期,然后根据我设置的速率继续增加。 1每秒。根据当前时间和开始时间之间的差异,该脚本将理想地计算应该在哪个数字上。jQuery或Javascript连续计数器(countup)
这意味着看起来像它显示一个活的计数。
理想的情况下,像柜台上http://sendgrid.com/
有没有人有一个链接或插件或解决方案,他们可以分享?
如果数字可以用数字的图像取代更好,但起点将不胜感激。
感谢
寻找一个我可以理想的脚本输入一个起始数字和一个开始日期,然后根据我设置的速率继续增加。 1每秒。根据当前时间和开始时间之间的差异,该脚本将理想地计算应该在哪个数字上。jQuery或Javascript连续计数器(countup)
这意味着看起来像它显示一个活的计数。
理想的情况下,像柜台上http://sendgrid.com/
有没有人有一个链接或插件或解决方案,他们可以分享?
如果数字可以用数字的图像取代更好,但起点将不胜感激。
感谢
如果你想有一个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);
}
可以使用技术类似于获取图像的方法,或者您可以使用CSS对counter div进行样式设置。
也许你有一个页面,这个标记:
<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(''));
}
完美,谢谢:) – Lee 2010-07-28 15:38:28