countup.js是切图网 qietu.com 在做页面前端制作时候常用的一款数字滚动插件，也是在众多数字滚动插件比如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)