countup.js是切图网在做页面前端制作时候常用的一款数字滚动插件，也是在众多数字滚动插件比如countto.js 等各种插件中对各种兼容性，效果，可扩展性等功能上进行评测后，依然觉得非常不错的一款，也是在切图项目中使用比例很高的一款，数字滚动在页面上非常常见，有利于提升页面的交互体验，特别是在可视化图表切图的时候，加上数字滚动可以增强页面交互效果。

countup.js配合waypoint.js可以实现滚动到页面某一个区域的时候开始滚动，下面要介绍的是如果通过countup.js实现多组数组滚动，并且每隔几秒滚动一次效果，原创 ，亲测可用，附代码：

html代码

<section class="numwrap">

<div id="">
<h1 class="jumbo" id="myTargetElement1">8431.35</h1>
<span class="text">资产规模(亿元)</span>
</div>
<div id="">
<h1 class="jumbo" id="myTargetElement2">8431.35</h1>
<span class="text">各项贷款(亿元)</span>
</div>
<div id="">
<h1 class="jumbo" id="myTargetElement3">8431.35</h1>
<span class="text">各项存款(亿元)</span>
</div>
</section>

JS代码

/*
初始滚动
* */
var randomNumber1 = Math.floor(Math.random() * 10000) + 1;
var num1 = new CountUp("myTargetElement1", 0, randomNumber1, 2, 2.5, {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
})
num1.start();

var randomNumber2 = Math.floor(Math.random() * 10000) + 1;
var num2 = new CountUp("myTargetElement2", 0, randomNumber2, 2, 2.5, {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
})
num2.start();

var randomNumber3 = Math.floor(Math.random() * 10000) + 1;
var num3 = new CountUp("myTargetElement3", 0, randomNumber3, 2, 2.5, {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.',
prefix : '',
suffix : ''
})
num3.start();

/*
几秒执行一次
* */
setInterval(function(){


var randomNumber1_new = Math.floor(Math.random() * 10000) + 1;
num1.update(randomNumber1_new);

var randomNumber2_new = Math.floor(Math.random() * 10000) + 1;
num2.update(randomNumber2_new);

var randomNumber3_new = Math.floor(Math.random() * 10000) + 1;
num3.update(randomNumber3_new);

},4000)

标签：countup.js, waypoint.js