countUp.js实现数字滚动效果
本文实例为大家分享了countUp.js数字滚动效果展示的具体代码，供大家参考，具体内容如下
1.概述
1.1说明
在项目过程中，有时候需要动态的去展示一些数据的加载状态，如一个数字为10000，需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。
1.2countup.js
countup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。详见countup.js
1.3countup.js使用
npminstallcountup 进行安装依赖
importCountUpfrom"countup" 在页面中引入
newCountUp(target,startVal,endVal,decimals,duration,options)
参数：
- target:目标元素的id *必填
- startVal：开始的值(从哪个值开始) *必填
- endVal：结束的值(滚动到哪个值结束) *必填
- decimals：小数位数，默认值为0 *可选
- duration：动画持续时间，单位为秒，默认值为2 *可选
- options：选项的可选对象 *可选
useEasing:true --是否使用缓动动画，默认为缓动，可设置为false让其匀速
useGrouping:true--对数字进行分组，如12345，按三位一组变为类似12,345这样的
separator:',' --分组时使用的分隔符默认是逗号
decimal:'.' --小数点
prefix:'' --添加前缀如12345，变为￥12345
suffix:'' --添加后缀如12345通过添加后缀变为12345$，12345元之类的
方法：
暂停/恢复 pauseResume
重置动画 reset
更新值 update(newVal)
2.代码
2.1源代码
varCountUp=function(target,startVal,endVal,decimals,duration,options){
varself=this;
self.version=function(){
return"1.9.2"
};
self.options={
useEasing:true,
useGrouping:true,
separator:",",
decimal:".",
easingFn:easeOutExpo,
formattingFn:formatNumber,
prefix:"",
suffix:"",
numerals:[]
};
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{
self.options.separator=""+self.options.separator
}
varlastTime=0;
varvendors=["webkit","moz","ms","o"];
for(varx=0;x1?self.options.decimal+x[1]:"";
if(self.options.useGrouping){
x3="";
for(i=0,l=x1.length;iself.endVal);
self.frameVal=self.startVal;
self.initialized=true;
returntrue
}else{
self.error="[CountUp]startVal("+startVal+")orendVal("+endVal+")isnotanumber";
returnfalse
}
};
self.printValue=function(value){
varresult=self.options.formattingFn(value);
if(self.d.tagName==="INPUT"){
this.d.value=result
}else{
if(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;
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)
}
}
if(self.countDown){
self.frameVal=(self.frameValself.endVal)?self.endVal:self.frameVal
}
self.frameVal=Math.round(self.frameVal*self.dec)/self.dec;
self.printValue(self.frameVal);
if(progressself.endVal);
self.rAF=requestAnimationFrame(self.count)
};
if(self.initialize()){
self.printValue(self.startVal)
}
};
2.1代码示例
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。