CountUp.js实现数字滚动增值效果
数据改动的时候，countUp.js进行数值滚动增加的动态效果，供大家参考，具体内容如下
这是js文件
//target=idofhtmlelementorvarofpreviouslyselectedhtmlelementwherecountingoccurs
//startVal=thevalueyouwanttobeginat
//endVal=thevalueyouwanttoarriveat
//decimals=numberofdecimalplaces,default0
//duration=durationofanimationinseconds,default2
//options=optionalobjectofoptions(seebelow)
varCountUp=function(target,startVal,endVal,decimals,duration,options){
varself=this
self.version=function(){return'1.9.3'}
//defaultoptions
self.options={
useEasing:true,//toggleeasing
useGrouping:true,//1,000,000vs1000000
separator:',',//charactertouseasaseparator
decimal:'.',//charactertouseasadecimal
easingFn:easeOutExpo,//optionalcustomeasingfunction,defaultisRobertPenner'seaseOutExpo
formattingFn:formatNumber,//optionalcustomformattingfunction,defaultisformatNumberabove
prefix:'',//optionaltextbeforetheresult
suffix:'',//optionaltextaftertheresult
numerals:[]//optionallypassanarrayofcustomnumeralsfor0-9
}
//extenddefaultoptionswithpassedoptionsobject
if(options&&typeofoptions==='object'){
for(varkeyinself.options){
if(options.hasOwnProperty(key)&&options[key]!==null){
self.options[key]=options[key]
}
}
}
if(self.options.separator===''){
self.options.useGrouping=false
}else{
//ensuretheseparatorisastring(formatNumberassumesthis)
self.options.separator=''+self.options.separator
}
//makesurerequestAnimationFrameandcancelAnimationFramearedefined
//polyfillforbrowserswithoutnativesupport
//byOperaengineerErikMöller
varlastTime=0
varvendors=['webkit','moz','ms','o']
for(varx=0;x1?self.options.decimal+x[1]:''
if(self.options.useGrouping){
x3=''
for(i=0,len=x1.length;iself.endVal)
self.frameVal=self.startVal
self.initialized=true
returntrue
}else{
self.error='[CountUp]startVal('+startVal+')orendVal('+endVal+')isnotanumber'
returnfalse
}
}
//Printvaluetotarget
self.printValue=function(value){
varresult=self.options.formattingFn(value)
if(self.d.tagName==='INPUT'){
this.d.value=result
}elseif(self.d.tagName==='text'||self.d.tagName==='tspan'){
this.d.textContent=result
}else{
this.d.innerHTML=result
}
}
self.count=function(timestamp){
if(!self.startTime){self.startTime=timestamp}
self.timestamp=timestamp
varprogress=timestamp-self.startTime
self.remaining=self.duration-progress
//toeaseornottoease
if(self.options.useEasing){
if(self.countDown){
self.frameVal=self.startVal-self.options.easingFn(progress,0,self.startVal-self.endVal,self.duration)
}else{
self.frameVal=self.options.easingFn(progress,self.startVal,self.endVal-self.startVal,self.duration)
}
}else{
if(self.countDown){
self.frameVal=self.startVal-((self.startVal-self.endVal)*(progress/self.duration))
}else{
self.frameVal=self.startVal+(self.endVal-self.startVal)*(progress/self.duration)
}
}
//don'tgopastendValsinceprogresscanexceeddurationinthelastframe
if(self.countDown){
self.frameVal=(self.frameValself.endVal)?self.endVal:self.frameVal
}
//decimal
self.frameVal=Math.round(self.frameVal*self.dec)/self.dec
//formatandprintvalue
self.printValue(self.frameVal)
//whethertocontinue
if(progressself.endVal)
self.rAF=requestAnimationFrame(self.count)
}
//formatstartValoninitialization
if(self.initialize())self.printValue(self.startVal)
}
module.exports=CountUp
index.html文件中需要进入该插件，和jq插件，再进行new实例化
varoptions={
useEasing:true,//使用缓和效果
useGrouping:true,//使用分组效果
separator:',',//分离器，数据够三位，例如100,000
decimal:'.',//小数点分割，例如：10.00
prefix:'',//第一位默认数字，例如：¥
suffix:''//最后一位默认数字，例如：元，美元
}
//newCountUp(target,startVal,endVal,decimals,duration,options)
//target=目标元素的ID
//startVal=开始值
//endVal=结束值
//decimals=小数位数默认值是0
//duration=动画延迟秒数，默认值是2；
//options=optionalobjectofoptions(seebelow)
vardemo=newCountUp('extractionMoney',0,data.balanceAmount,2,0.5,options)
if(!demo.error){
demo.start()
}else{
console.error(demo.error)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。