
首页「满意度 98%、项目数 120」这类指标一般不会一进来就定格而是页面滚到这里时从 0 往上加。本例用 jQuery 判断是否进入可视区再用定时器改文字。演示页上方留了一段空白方便往下滚看效果。递增数字在页面上如何展示数字放在带颜色的容器里大号数字一个 span单位如 %用旁边的 em。本例主色 #2ea7e0数字 100px、加粗单位 48px。要参与递增的节点加上类名 js-count初始文字写 0。目标值写在 />字号、颜色按设计改。不需要百分号就去掉后面的 em。滚动到数字区域时如何触发递增进入可视区的判断元素顶部小于「当前滚动距离 窗口高度」说明已经出现在窗口里或刚好顶到窗口下沿以上。页面加载时先检查一次数字本来就在首屏也能动再监听 scroll、resize滚到了再开加。每个数字用 data(“played”) 记是否播过避免来回滚动反复从 0 加。这坑我见过不止一次只在 $(function(){}) 里调一次数字在首屏以下时永远不触发。加载和滚动都要查。数字递增滚动的过程怎么写进入可视区且未播过时从 0 开始每隔 speed 毫秒加 1加到 max 后清掉定时器并定格在目标值。timer 是 setInterval 的返回值结束时必须 clearInterval否则会空转。目标很大时间隔太小会显得闪间隔太大又像一顿一顿的需要和第 4 节一起调。目标值和滚动速度如何设置两个参数1、data-max最终显示的数字2、data-speed每加 1 隔多少毫秒数字越小加得越快本例满意度 98、间隔 30大约两三秒加完同比增长 10、间隔 50加得更慢、更容易看清。业务里按设计节奏改这两项即可一般不用改 growNum 函数本身。需要一次加 2、加 5或带小数再在 growNum 里改步进逻辑本例按整数每次加 1够覆盖常见统计数字。多个统计数字如何一起做递增滚动同一区块里多个指标每个都加 js-count各自写 />完整示例滚到这一块时谁进入可视区谁开始加互不抢同一个定时器。接口若返回真实数据渲染时把>