网页数字滚动插件 countup.js 使用方法 亲测可用，支持jquery,vue

大家好，欢迎来到IT知识分享网。

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)