"```markdown

使用JavaScript实现数字动态累加的方法

在前端开发中，动态数字累加的效果常用于展示统计数据、加载进度等场景。下面我们将使用JavaScript编写一个简单的动态数字累加方法。

基本思路

我们将创建一个函数，该函数接收目标数字和累加的持续时间作为参数。在指定的时间内，数字将逐渐增加，直到达到目标值。

实现代码

function animateNumber(target, duration) {
    // 获取当前时间
    const startTime = performance.now();
    
    // 获取元素并初始化当前值
    const element = document.getElementById('number');
    let startValue = 0;

    // 动画函数
    function updateNumber(currentTime) {
        // 计算已经经过的时间
        const elapsedTime = currentTime - startTime;

        // 计算当前值
        if (elapsedTime < duration) {
            // 线性插值
            startValue = Math.floor((elapsedTime / duration) * target);
            element.textContent = startValue;

            // 请求下一个动画帧
            requestAnimationFrame(updateNumber);
        } else {
            // 动画结束，确保最后的值是目标值
            element.textContent = target;
        }
    }
    
    // 开始动画
    requestAnimationFrame(updateNumber);
}

// 用法示例
document.addEventListener('DOMContentLoaded', () => {
    // 调用函数，目标数字为1000，持续时间为2000毫秒
    animateNumber(1000, 2000);
});

代码解析

1. 函数定义：animateNumber接收目标数字和持续时间作为参数。
2. 获取当前时间：使用performance.now()获取精确的当前时间，以便后续计算。
3. 获取元素：通过document.getElementById获取要更新的DOM元素。
4. 动画逻辑：
   • 使用requestAnimationFrame来创建平滑的动画效果。
   • 计算经过的时间，并根据时间来动态更新数字。
   • 使用线性插值的方式计算当前值，并更新页面显示。
5. 结束条件：当时间超过指定的持续时间时，确保显示的值为目标值。

结论

以上代码展示了如何使用JavaScript实现数字的动态累加效果。可以根据需求调整目标数字和持续时间，适用于各种场景如数据加载、统计展示等。通过这种方式，可以使用户体验更加生动且互动。