使用countUp.js怎么实现一个数字滚动效果

　　介绍

这篇文章将为大家详细讲解有关使用countUp.js怎么实现一个数字滚动效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强> 1.1说明

在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成。此时使用countUp.js就能够很方便的处理此类功能问题。

<强> 1.2 countUp.js

countUp.js是一个无依赖性,轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据。详见countUp.js

<强> 1.3 countup。js使用

npm安装countup 进行安装依赖

从“进口CountUp countup",在页面中引入

新CountUp(目标,startVal endVal,小数、持续时间、选项)

<强>参数:

<李>

目标:目标元素的id 李*必填

<李>

startVal:开始的值(从哪个值开始),李*必填

<李>

endVal:结束的值(滚动到哪个值结束),李*必填

<李>

小数:小数位数,默认值为0,李*可选

<李>

时间:动画持续时间,单位为秒,默认值为2,李*可选

<李>

选择:选项的可选对象,李*可选

,,,,,,,,,,,,,,,,,,,,useEasing: true ——是否使用缓动动画,默认为缓动,可设置为假让其匀速

,,,,,,,,,,,,,,,,,,,,useGrouping:真正的——对数字进行分组,如12345年,按三位一组变为类似12345年这样的

,,,,,,,,,,,,,,,,,,,,分隔符:& # 39;& # 39;,——分组时使用的分隔符默认是逗号

,,,,,,,,,,,,,,,,,,,,,小数:& # 39;# 39;公司,——小数点

,,,,,,,,,,,,,,,,,,,,,前缀:& # 39;& # 39;,12345年——添加前缀如变为￥12345

,,,,,,,,,,,,,,,,,,,,,后缀:& # 39;& # 39;,12345年——添加后缀如通过添加后缀变为12345美元,12345元之类的

<强>方法:

暂停/恢复,,,,,pauseResume
重置动画,,,,,,重置
更新值,,,,,,,,,,更新(newVal)

<强> 2。代码

<强> 2.1源代码

var  CountUp =,函数(startVal,目标,还以为,endVal,小数,,,,选项),{=,var  self ;=,self.version 函数(),{ 　　,return “1.9.2" 　　,}; 　　,self.options =, { 　　,useEasing:没错, 　　,useGrouping:没错, 　　,分隔符:““, 　　,小数:“干净, 　　,easingFn: easeOutExpo, 　　,formattingFn: formatNumber, 　　,前缀:““, 　　,后缀:““, 　　,数字:[] 　　,}; 　　,if  (options ,,, typeof  options ===,“object"), { 　　,for  (var  key  self.options拷贝),{ 　　if 才能;(options.hasOwnProperty(键),,,,选项(例子),!==,null), { 　　self.options才能(例子),=,选项(例子) 　　,,} 　　,} 　　,} 　　,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;, x  & lt;, vendors.length ,,, ! window.requestAnimationFrame;, + + x), {=,window.requestAnimationFrame 窗口(供应商[x], +,“RequestAnimationFrame"];=,window.cancelAnimationFrame 窗口(供应商[x], +,“CancelAnimationFrame"], | |,窗口(供应商[x], +,“CancelRequestAnimationFrame"】 　　,} 　　,if  (! window.requestAnimationFrame), {=,window.requestAnimationFrame 函数(回调,元素),{ 　　var 才能;currTime =, new 日期().getTime (); 　　var 才能;timeToCall =, Math.max(0,, 16,安康;(currTime 作用;lastTime)); 　　var 才能;id =, window.setTimeout(函数(),{ 　　回调才能(currTime  +, timeToCall) 　　,,}, 　　timeToCall才能); 　　时间=lastTime 才能;currTime  +, timeToCall; 　　return 才能;id 　　,} 　　,} 　　,if  (! window.cancelAnimationFrame), {=,window.cancelAnimationFrame 函数(id), { 　　clearTimeout才能(id) 　　,} 　　,} 　　,function  formatNumber (num), {=,,num  num.toFixed (self.decimals); 　　+=,num “,“; 　　,var  x, x1, x2, x3,,我,,l; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用countUp.js怎么实现一个数字滚动效果