js实现简单数字变动效果
本文实例为大家分享了js实现数字变动效果展示的具体代码,供大家参考,具体内容如下
$.fn.countTo=function(options){ options=options||{};//当options未被初始化,即typeofoptions='undefined'时,执行后面部分即varoptions={}来初始化一个对象 return$(this).each(function(){ //setoptionsforcurrentelement varsettings=$.extend({},$.fn.countTo.defaults,{ from:$(this).data('from'), to:$(this).data('to'), speed:$(this).data('speed'), refreshInterval:$(this).data('refresh-interval'), decimals:$(this).data('decimals') },options); //howmanytimestoupdatethevalue,andhowmuchtoincrementthevalueoneachupdate //更新值多少次,每次更新值多快 varloops=Math.ceil(settings.speed/settings.refreshInterval), increment=(settings.to-settings.from)/loops; //references&variablesthatwillchangewitheachupdate //引用和变量每次更新将改变 varself=this,//返回html对象 $self=$(this),//返回返回一个jquery对象 loopCount=0, value=settings.from, data=$self.data('countTo')||{};//获取jauery方法对象 $self.data('countTo',data);//赋值 //ifanexistingintervalcanbefound,clearitfirst //如果存在间隔,则清除它 if(data.interval){ clearInterval(data.interval); } data.interval=setInterval(updateTimer,settings.refreshInterval); //initializetheelementwiththestartingvalue //用开始的值初始化 render(value); functionupdateTimer(){ value+=increment; loopCount++; render(value); if(typeof(settings.onUpdate)=='function'){ settings.onUpdate.call(self,value); } if(loopCount>=loops){ //removetheinterval $self.removeData('countTo'); clearInterval(data.interval); value=settings.to; if(typeof(settings.onComplete)=='function'){ settings.onComplete.call(self,value); } } } functionrender(value){ varformattedValue=settings.formatter.call(self,value,settings); $self.html(formattedValue); } }); }; $.fn.countTo.defaults={ from:200,//thenumbertheelementshouldstartat to:0,//thenumbertheelementshouldendat speed:1000,//howlongitshouldtaketocountbetweenthetargetnumbers refreshInterval:1,//howoftentheelementshouldbeupdated decimals:0,//thenumberofdecimalplacestoshow formatter:formatter,//handlerforformattingthevaluebeforerendering onUpdate:null,//callbackmethodforeverytimetheelementisupdated onComplete:null//callbackmethodforwhentheelementfinishesupdating }; functionformatter(value,settings){ returnvalue.toFixed(settings.decimals); } //customformattingexample $('#count-number').data('countToOptions',{ formatter:function(value,options){ returnvalue.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g,','); } }); //startallthetimers $('.timer').each(count); functioncount(options){ var$this=$(this); options=$.extend({},options||{},$this.data('countToOptions')||{}); $this.countTo(options); }
apply与call的简单用法,学习链接。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。