首先引入jQuery.js
引入 jquery.waypoints.js (点击下载)监听页面滚动事件
引入jquery.counterup.js (点击下载)数字动画插件
在需要的滚动的数字上添加class类名counter作为数字的容器
在页面添加js代码，$(‘.counter’).countUp();
就这个样就可以实现数字从零到指定数值了，话不多说上代码~

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.waypoints.min.js"></script>
<script src="./js/jquery.countup.min.js"></script>
<style>
    .content{
        display: flex; justify-content: space-between; align-items: center;
        padding: 100px;
        margin: auto;
        height: 200vh;
    }
    span{
        font-size: 40px;
    }`在这里插入代码片`
</style>
<div class="content">
    <span class="counter">20</span>
    <span class="counter">100</span>
    <span class="counter">500</span>
</div>
<script>
    $('.counter').countUp();
</script>

进阶用法
也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间

<div class="content">
    <span class="counter" data-counter-time="5000" data-counter-delay="50">20</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="60">100</span>
    <span class="counter" data-counter-time="5000" data-counter-delay="10">500</span>
</div>

原文链接：https://blog.csdn.net/qq_38188228/article/details/123560920