jQuery计数器计数到目标数字 [英] jQuery counter to count up to a target number
问题描述
我正在尝试找出是否有人知道一个已经存在的 jQuery 插件,该插件将以指定的速度计数到目标数.
I'm trying to find out if anyone knows about an already existing jQuery plugin that will count up to a target number at a specified speed.
例如,在 Gmail 主页 的标题下查看 Google 的免费存储 MB 数空间很大".它在 <span>
标签中有一个起始数字,并且每秒缓慢地向上计数.
For example, take a look at Google's number of MB of free storage on the Gmail homepage, under the heading that reads "Lots of space". It has a starting number in a <span>
tag, and slowly counts upward every second.
我正在寻找类似的东西,但我希望能够指定:
I'm looking for something similar, but I'd like to be able to specify:
- 起始编号
- 结束编号
- 从开始到结束应该花费的时间.
- 一个可以在计数器完成时执行的自定义回调函数.
推荐答案
我最终创建了自己的插件.这是以防万一这对任何人都有帮助:
I ended up creating my own plugin. Here it is in case this helps anyone:
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
下面是一些如何使用它的示例代码:
Here's some sample code of how to use it:
<script type="text/javascript"><!--
jQuery(function($) {
$('.timer').countTo({
from: 50,
to: 2500,
speed: 1000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
//--></script>
<span class="timer"></span>
在 JSFiddle 上查看演示:http://jsfiddle.net/YWn9t/
View the demo on JSFiddle: http://jsfiddle.net/YWn9t/
这篇关于jQuery计数器计数到目标数字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!