数字增加变化到目标数值动画，js实现
html
<div id="sup6"><div class="top-title"><div class="title">服务规模</div><p class="text">SCALE OF SERVICE</p></div><div class="list flex-cc wrap w1400"><div class="li"><div class="num"><span>10000</span>+</div><div class="text">付费用户</div></div><div class="li"><div class="num"><span>5000</span>+</div><div class="text">科研视频课程</div></div><div class="li"><div class="num"><span>40</span>+</div><div class="text">行业资质认证</div></div><div class="li"><div class="num"><span>1000</span>+</div><div class="text">高校院所</div></div><div class="li"><div class="num"><span>50</span>+</div><div class="text">技术工程师</div></div><div class="li"><div class="num"><span>200</span>+</div><div class="text">科研应用软件</div></div><div class="li"><div class="num"><span>30</span>万核+</div><div class="text">自建算力资源</div></div><div class="li"><div class="num"><span>500</span>+</div><div class="text">企业用户</div></div></div></div>css
#sup6 {height: 689px;background: url("/assets/image/supercomputing/supercomputing2.png")no-repeat;background-size: 100% 100%;.list {gap: 40px 100px;padding: 0px 50px;.li {background: url("/assets/image/supercomputing/box.png") no-repeat;background-size: 100% auto;width: 200px;height: 200px;text-align: center;position: relative;&:nth-child(2n) {transform: translateY(20px);}&::before {content: "";position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%);width: 91px;height: 8px;background: #a8daf5;border-radius: 50%;filter: blur(.5rem);}.num {font-size: 40px;font-weight: bold;color: #c4302c;margin-top: 60px;}.text {font-size: 20px;font-weight: 500;color: #606266;}}}}jq
// 动画效果只执行一次let isAnimated = true;// 滚动监听$(window).scroll(function () {// 服务规模数字变化if ($(this).scrollTop() >= 3800 &&window.location.pathname == "/page/supercomputing.html" &&isAnimated) {isAnimated = false;const $spans = $("#sup6 .list .li .num span");let duration = 2000; // 动画持续时间（毫秒）$spans.each(function () {let $span = $(this);let target = parseInt($span.text()); // 获取页面目标值$span.text(0); // 初始显示为 0let startTime = null;function animate(timestamp) {if (!startTime) startTime = timestamp;let progress = timestamp - startTime;let percentage = Math.min(progress / duration, 1);let value = Math.floor(percentage * target);if (value > target) value = target;$span.text(value);if (progress < duration) {requestAnimationFrame(animate);}}requestAnimationFrame(animate);});}});