> 技术文档 > 数字增加变化到目标数值动画，js实现

数字增加变化到目标数值动画，js实现

技术文档

html

   服务规模
 SCALE OF SERVICE
 
   10000+
 付费用户
 
  5000+
 科研视频课程
 
  40+
 行业资质认证
 
  1000+
 高校院所
 
  50+
 技术工程师
 
  200+
 科研应用软件
 
  30万核+
 自建算力资源
 
  500+
 企业用户

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); // 初始显示为 0 let 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); }); } });