jQuery 如何通过CountUp.js简单的配置来实现让数字滚动起来

1：CountUp.js介绍

CountUp.js是一个无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。使用软件包名称通过npm / yarn安装 countup.js。

1.1参数介绍：

target =发生计数的html元素，输入，svg文本元素或先前选择的元素/输入的var的ID
startVal =您要开始的值
endVal =您想要获得的价值
decimals =（可选）数字中的小数位数，默认为0
duration =（可选）持续时间（以秒为单位），默认为2
options =（可选，请参阅演示）格式化/缓和选项对象

官方效果gif图

2：相关使用方法

2.1 页面初始化就运行

var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);
num2.start();

2.2 暂停或继续

var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);
num2.pauseResume(); //暂停或者继续

2.3重置

// 重置初始值
var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);
num2.reset();

2.4 重新赋值

// 重新赋值
var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);
num2.update(258);

3：实际代码和操作图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数字滚动</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/countUp.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<script>
var options={
	useEasing: true,  // 过渡动画效果，默认ture
	useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
	separator: ',',   // 使用千分位时分割符号
	decimal: '.',   // 小数位分割符号
	prefix: '',    // 前置符号
	suffix: ''    // 后置符号，可汉字
}
// target,startVal,endVal,decimals,duration,options
// dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
var num1 = new CountUp('num1', 0, 125414, 0, 2,options);
var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);

$(document).ready(function(){
	// 开始
	num1.start()
	num2.start()
})

function start(){
	// 开始
	num1.start()
}
function pause(){
	// 暂停或继续
	num1.pauseResume()
}
function reset(){
	// 重置初始值
	num1.reset()
}
function updata(){
	// 重新赋值
	num1.update(888)
}
</script>


<body>
<div class="content">数字一：<span id="num1">0</span></div>
<div class="content">数字二：<span id="num2">0</span></div>
</br>
    <div class="content"><button onclick="start()">开始</button>&nbsp;&nbsp;<button onclick="pause()">暂停</button>&nbsp;&nbsp;<button onclick="reset()">重置</button>&nbsp;&nbsp;<button onclick="updata()">更新值</button></div>
</body>
</html>

4：可以同时执行多个数字滚动效果

// target,startVal,endVal,decimals,duration,options
// dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
var num1 = new CountUp('num1', 0, 125414, 0, 2,options);
var num2 = new CountUp('num2', 0, 2587415874, 0, 2,options);

$(document).ready(function(){
	// 开始
	num1.start()
	num2.start()
})

function start(){
	// 开始
	num1.start();
    num2.start();
}

5:直接放上CountUp.js文件代码

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;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime=new Date().getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(id){clearTimeout(id)}}function formatNumber(num){num=num.toFixed(self.decimals);num+="";var x,x1,x2,x3,i,l;x=num.split(".");x1=x[0];x2=x.length>1?self.options.decimal+x[1]:"";if(self.options.useGrouping){x3="";for(i=0,l=x1.length;i<l;++i){if(i!==0&&((i%3)===0)){x3=self.options.separator+x3}x3=x1[l-i-1]+x3}x1=x3}if(self.options.numerals.length){x1=x1.replace(/[0-9]/g,function(w){return self.options.numerals[+w]});x2=x2.replace(/[0-9]/g,function(w){return self.options.numerals[+w]})}return self.options.prefix+x1+x2+self.options.suffix}function easeOutExpo(t,b,c,d){return c*(-Math.pow(2,-10*t/d)+1)*1024/1023+b}function ensureNumber(n){return(typeof n==="number"&&!isNaN(n))}self.initialize=function(){if(self.initialized){return true}self.error="";self.d=(typeof target==="string")?document.getElementById(target):target;if(!self.d){self.error="[CountUp] target is null or undefined";return false}self.startVal=Number(startVal);self.endVal=Number(endVal);if(ensureNumber(self.startVal)&&ensureNumber(self.endVal)){self.decimals=Math.max(0,decimals||0);self.dec=Math.pow(10,self.decimals);self.duration=Number(duration)*1000||2000;self.countDown=(self.startVal>self.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.frameVal<self.endVal)?self.endVal:self.frameVal}else{self.frameVal=(self.frameVal>self.endVal)?self.endVal:self.frameVal}self.frameVal=Math.round(self.frameVal*self.dec)/self.dec;self.printValue(self.frameVal);if(progress<self.duration){self.rAF=requestAnimationFrame(self.count)}else{if(self.callback){self.callback()}}};self.start=function(callback){if(!self.initialize()){return}self.callback=callback;self.rAF=requestAnimationFrame(self.count)};self.pauseResume=function(){if(!self.paused){self.paused=true;cancelAnimationFrame(self.rAF)}else{self.paused=false;delete self.startTime;self.duration=self.remaining;self.startVal=self.frameVal;requestAnimationFrame(self.count)}};self.reset=function(){self.paused=false;delete self.startTime;self.initialized=false;if(self.initialize()){cancelAnimationFrame(self.rAF);self.printValue(self.startVal)}};self.update=function(newEndVal){if(!self.initialize()){return}newEndVal=Number(newEndVal);if(!ensureNumber(newEndVal)){self.error="[CountUp] update() - new endVal is not a number: "+newEndVal;return}self.error="";if(newEndVal===self.frameVal){return}cancelAnimationFrame(self.rAF);self.paused=false;delete self.startTime;self.startVal=self.frameVal;self.endVal=newEndVal;self.countDown=(self.startVal>self.endVal);self.rAF=requestAnimationFrame(self.count)};if(self.initialize()){self.printValue(self.startVal)}};

官方js文件介绍地址 http://inorganik.github.io/countUp.js/

posted @ 2022-08-04 19:12 码奴生来只知道前进~ 阅读(447) 评论(0) 编辑收藏举报

刷新页面返回顶部

tanqingfu1