countUp.js-让数字动起来


Document5000010000020000pauseResumeresetupdate



参数:

 target : 目标元素的id
 startVal : 你想要开始的值
 endVal : 你想要到达的值
 decimals : 小数位数,默认值为0
 duration : 动画持续时间为秒,默认值为2
 options :选项的可选对象

//options对象参数

options = {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ',', // character to use as a separator
decimal: '.', // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: '', // optional text before the result
suffix: '', // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9
};

还有几个方法:

//暂停/恢复

money1.pauseResume();

//重置动画

money1.reset();

//更新值

var someValue = 6666;

money1.update(someValue);

 



附上countUp.js压缩后的源码,就不用去下载啦 ctrl+c ctrl+v 哈哈哈、

var CountUp=function(target,startVal,endVal,decimals,duration,options){var self=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&&typeof options==="object"){for(var key in self.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}var lastTime=0;var vendors=["webkit","moz","ms","o"];for(var x=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;return true}else{self.error="[CountUp] startVal ("+startVal+") or endVal ("+endVal+") is not a number";return false}};self.printValue=function(value){var result=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;var progress=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)}};

热门文章

  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪冠军赛技术官员的函
  • 体育总局冬运中心关于公示第十四届全国冬季运动会冬季两项项目参赛运动员名单的函
  • 中国滑雪协会关于发布全国滑雪俱乐部精英联赛(吉林站)竞赛规程的通知
  • 体育总局冬运中心关于第十四届全国冬季运动会冬季两项项目替换运动员的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会单板滑雪U型场地等项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会冬季两项项目参赛运动员名单的通知
  • 体育总局冬运中心关于取消举办2023-2024赛季全国冬季两项冠军赛的通知
  • 体育总局冬运中心关于选派裁判员参加2023-2024赛季单板滑雪平行项目全国冠军赛暨国际雪联FIS积分赛的函
  • 中国滑雪协会关于全国滑雪俱乐部精英联赛(吉林站)的补充通知
  • 2023-2024赛季全国跳台滑雪冠军赛竞赛规程
  • 2023-2024赛季全国高山滑雪冠军赛竞赛规程
  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪锦标赛暨第十四届全国冬季运动会高山滑雪资格赛技术官员的函
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪U型场地冠军赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪大跳台和坡面障碍技巧冠军赛竞赛规程的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会越野滑雪项目参赛运动员名单的函