一、需求描述:在项目中有时需要页面显示数值的元素,在页面刷新时数值从零动态增加到指定值的显示效果,本文即为该效果的简单实现。
二、代码:
;(function($){
;(function($){
$.fn.autoIncreActive = function(totaltime,speed){//数字逐渐增加显示时,totaltime数字加载总时间
var $self = $(this);
var loops = Math.ceil(totaltime/speed);
return $self.each(function(index,element){
var value = 0,tempval;
if(isNaN(Number($(element).text()))){
throw "not a number";
return false;
}else{
value = Number($(element).text());
tempval = value;
}
if($(element).data("timer")){
clearInterval($(element).data("timer"));
$(element).removeData("timer");
}
$(element).data("timer",setInterval(function(){
value = value - Math.ceil(tempval/loops);
if(value<0){
value = 0;
clearInterval($(element).data("timer"));
$(element).removeData("timer");
}
$(element).text(tempval-value);
},speed));
});
}
})(jQuery);
参考:
http://www.17sucai.com/preview/1/2014-08-01/%E6%95%B0%E5%AD%97%E5%8A%A8%E7%94%BB/js/index.js