如何使用JavaScript实现随机变速的数值计数动画效果

实现思路 #

原代码使用固定步长+固定间隔的setInterval实现匀速计数，要实现随机加减速效果，只需把固定的步长和间隔改成动态随机值，同时做好边界判断避免数值超过目标值即可。

完整可运行代码 #

HTML 部分

<div id="value">0</div>

JavaScript 部分

function animateValueRandomSpeed(id, start, end) {
    let current = start;
    const obj = document.getElementById(id);
    // 随机参数可按需调整，数值范围越大速度波动越明显
    const minDelay = 10; // 最小更新间隔（ms），越小速度越快
    const maxDelay = 80; // 最大更新间隔（ms），越大速度越慢
    const minStep = 1; // 单次最小增长数值
    const maxStep = 12; // 单次最大增长数值

    function updateCount() {
        // 随机生成当前步长
        const step = Math.floor(Math.random() * (maxStep - minStep + 1)) + minStep;
        current += step;
        // 边界处理，确保最终数值准确等于目标值
        if (current >= end) {
            obj.innerHTML = end;
            return;
        }
        obj.innerHTML = current;
        // 随机生成下一次更新的间隔时间
        const nextDelay = Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
        setTimeout(updateCount, nextDelay);
    }
    updateCount();
}

// 调用示例：从0随机增速/减速增长到1000
animateValueRandomSpeed("value", 0, 1000);

调整说明 #

• 若想让速度波动更剧烈，可拉大minDelay和maxDelay、minStep和maxStep的差值
• 若需要固定总时长内完成计数，可在逻辑中加入剩余时间判断，动态调整步长和延迟的随机范围即可

内容的提问来源于stack exchange，提问作者r0naldinio