js 数字滚动

// js 数字滚动 示例代码

// HTML部分
<div id="numberDisplay">0</div>

// JavaScript部分
function scrollNumber(target, duration) {
    let start = parseInt(document.getElementById('numberDisplay').innerText);
    let change = target - start;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        let timeElapsed = currentTime - startTime;
        let run = ease(timeElapsed, start, change, duration);
        document.getElementById('numberDisplay').innerText = Math.floor(run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

// 调用示例：将数字从当前值滚动到100，持续时间为2秒（2000毫秒）
scrollNumber(100, 2000);

解释说明：

1. HTML部分:

   • 创建一个<div>元素用于显示数字。

2. JavaScript部分:

   • scrollNumber函数接受两个参数：目标数字 (target) 和动画持续时间 (duration)。
   • start变量获取当前显示的数字。
   • change表示目标数字与起始数字之间的差值。
   • startTime用于记录动画开始的时间。
   • animation函数是实际执行动画的递归函数，使用requestAnimationFrame实现平滑过渡。
   • ease函数是一个简单的缓动函数，使数字滚动更加自然。
   • 最后调用requestAnimationFrame启动动画。

3. 调用示例:

   • 将数字从当前值滚动到100，持续时间为2秒（2000毫秒）。