如何实现按用户指定步长递增计数器至目标值？

原countUp函数默认按1递增，需修改为根据元素data-increment属性指定的步长递增，直到达到data-count设定的目标值。例如从500按100递增至1000.45，过程为500→600→700→800→900→1000.45。

修改后的代码 #

function countUp() {
    $('.countup.counter span.number').each(function() {
        var num = jQuery(this),
            countFrom = parseFloat(num.attr("data-from")),
            countTo = parseFloat(num.attr("data-count")),
            countIncrement = parseFloat(num.attr("data-increment")),
            countSpeed = parseInt(num.attr("data-duration"));
        
        // 计算目标值的小数位数
        var decimal = 0;
        if (countTo.toString().indexOf(".") > 0) {
            decimal = countTo.toString().split(".")[1].length;
        }

        var currentNum = countFrom;
        // 初始化显示起始数值
        num.text(currentNum.toFixed(decimal));

        // 计算总步数与每步间隔时间，保证总时长符合设定
        var totalSteps = Math.ceil((countTo - countFrom) / countIncrement);
        var stepInterval = countSpeed / totalSteps;

        var timer = setInterval(function() {
            // 最后一步直接跳至目标值，避免超过上限
            if (currentNum + countIncrement >= countTo) {
                currentNum = countTo;
                clearInterval(timer);
            } else {
                currentNum += countIncrement;
            }
            num.text(currentNum.toFixed(decimal));
        }, stepInterval);
    });
}

关键改动说明 #

• 将所有数据属性值转换为数值类型，避免字符串运算导致的错误
• 替换jQuery animate的自动插值逻辑，改用setInterval手动控制步长：
  1. 计算总步数与每步间隔时间，确保总时长匹配data-duration的设定
  2. 严格按照data-increment的数值递增，最后一步直接设置为目标值
  3. 保留目标值的小数位数，保证显示格式统一

示例DOM结构 #

<div class="counter">
    <span class="prefix">£</span>
    <span class="number" data-increment="100" data-from="500" data-count="1000.45" data-duration="2000"></span>
    <span class="suffix"></span>
</div>

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