JavaScript数字递增动画遇到带千位逗号的数字停止计数如何解决

你的代码失效的核心原因是parseInt读取带逗号的字符串时会自动截断逗号后的内容：parseInt("53,210", 10)的返回值只有53，导致目标计数数值错误，同时渲染时没有将计算得到的纯数字转换为带千位分隔符的格式。

1. 读取目标数值时，先移除字符串中所有逗号再转为整数
2. 每次更新DOM时，将计算得到的纯数字转换为带千位逗号的格式再写入
3. 优化数值更新判断逻辑，避免每次从带逗号的DOM内容中解析整数

JavaScript代码 #

window.onload = function() {
  runAnimations();
};

// 动画总时长，单位ms
const animationDuration = 2000;
// 按60帧/秒计算每帧间隔时长
const frameDuration = 1000 / 60;
// 动画总帧数
const totalFrames = Math.round( animationDuration / frameDuration );
// ease-out缓动函数，计数后期速度放缓
const easeOutQuad = t => t * ( 2 - t );

// 千位分隔符格式化工具函数
const formatWithCommas = num => num.toLocaleString();

// 计数动画函数
const animateCountUp = el => {
    let frame = 0;
    // 先移除所有逗号再转整数，得到正确的目标值
    const countTo = parseInt( el.innerHTML.replace(/,/g, ''), 10 );
    // 记录上一次渲染的数值，避免每次从DOM重复解析
    let lastRenderedCount = 0;
    const counter = setInterval( () => {
        frame++;
        // 计算当前动画进度并应用缓动曲线
        const progress = easeOutQuad( frame / totalFrames );
        // 计算当前应展示的数值
        const currentCount = Math.round( countTo * progress );

        // 数值变化时更新DOM，同时格式化带千位逗号
        if (currentCount !== lastRenderedCount) {
            el.innerHTML = formatWithCommas(currentCount);
            lastRenderedCount = currentCount;
        }

        // 动画结束清除定时器
        if ( frame === totalFrames ) {
            clearInterval( counter );
        }
    }, frameDuration );
};

// 对所有带countup类的元素执行动画
const runAnimations = () => {
    const countupEls = document.querySelectorAll( '.countup' );
    countupEls.forEach( animateCountUp );
};

HTML代码 #

<ul>
  <li><span class="countup">45</span></li>
  <li><span class="countup">110</span></li>
  <li><span class="countup">53,210</span></li>
</ul>

修改后代码可兼容纯数字和带千位逗号的初始值，动画过程中也会自动展示千位分隔符。

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