在Jquery中的随机数效应 [英] Random Number Effect In Jquery
本文介绍了在Jquery中的随机数效应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我被卡住了。我试图得到jquery加载的页面生成一个动画使用数字。因此,数字5将在0-9之间切换,直到分配的时间结束或者如果我有50,5将经过0-9并且0也将经过0-9。
I am stuck. I am trying to get jquery to on load of the page generate an animation using numbers. So that the number 5 would be switching between 0 - 9 until the allotted time was up or if I have 50 the 5 would be going through 0 - 9 and the 0 would also being going through 0 - 9.
感谢大家的回答和建议。
Thank you all for your answers and suggestions.
推荐答案
我很无聊。 此处 :
I was bored. Here:
(function($){
$.fn.extend({
numAnim: function(options) {
if ( ! this.length)
return false;
this.defaults = {
endAt: 2560,
numClass: 'autogen-num',
duration: 5, // seconds
interval: 90 // ms
};
var settings = $.extend({}, this.defaults, options);
var $num = $('<span/>', {
'class': settings.numClass
});
return this.each(function() {
var $this = $(this);
// Wrap each number in a tag.
var frag = document.createDocumentFragment(),
numLen = settings.endAt.toString().length;
for (x = 0; x < numLen; x++) {
var rand_num = Math.floor( Math.random() * 10 );
frag.appendChild( $num.clone().text(rand_num)[0] )
}
$this.empty().append(frag);
var get_next_num = function(num) {
++num;
if (num > 9) return 0;
return num;
};
// Iterate each number.
$this.find('.' + settings.numClass).each(function() {
var $num = $(this),
num = parseInt( $num.text() );
var interval = setInterval( function() {
num = get_next_num(num);
$num.text(num);
}, settings.interval);
setTimeout( function() {
clearInterval(interval);
}, settings.duration * 1000 - settings.interval);
});
setTimeout( function() {
$this.text( settings.endAt.toString() );
}, settings.duration * 1000);
});
}
});
})(jQuery);
测试HTML:
Test HTML:
<span id="number"></span>
用法:
Usage:
$("#number").numAnim({
endAt: 97855,
duration: 3
});
这篇关于在Jquery中的随机数效应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文