jQuery prop计数器按指定步长与间隔实现无限循环计数动画方案

原有逻辑是一次性完成从0到目标值的计数动画，要实现差异化步长、差异化间隔、无限循环的需求，只需要把统一的单次动画逻辑改成按每个计数项独立配置定时触发即可，原有动画动效可以完全保留。

核心调整点 #

• 为三个计数项分别配置独立的步长、触发间隔、目标值参数，运行时互不干扰
• 用定时器按对应间隔触发单步步长递增，数值累计到目标值后自动重置为0，实现无限循环
• 每次触发动画前终止上一轮未完成的动画，避免动画队列堆积导致的显示异常
• 保留原有数字滚动的缓动动效、德语区数字格式化规则，和原有视觉表现完全一致

完整实现代码 #

// 各计数项独立配置
const counterConfig = {
  count1: {
    increment: 3,
    interval: 3000,
    target: parseInt($('#count1').text())
  },
  count2: {
    increment: 2,
    interval: 2000,
    target: parseInt($('#count2').text())
  },
  count3: {
    increment: 1,
    interval: 1000,
    target: parseInt($('#count3').text())
  }
}

// 初始化所有计数器
Object.keys(counterConfig).forEach(elId => {
  const $counterEl = $(`#${elId}`)
  const currentConfig = counterConfig[elId]
  // 初始计数归零
  $counterEl.prop('Counter', 0)

  // 按配置的间隔触发递增
  setInterval(() => {
    let nextVal = $counterEl.prop('Counter') + currentConfig.increment
    // 超过目标值自动重置，实现无限循环
    if (nextVal > currentConfig.target) nextVal = 0

    // 执行原有数字滚动动画
    $counterEl.stop().animate({
      Counter: nextVal
    }, {
      duration: 1500,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now).toLocaleString('de-DE'))
      },
      complete: function() {
        $(this).prop('Counter', nextVal)
      }
    })
  }, currentConfig.interval)
})

对应的HTML结构不需要修改，和原有代码保持一致即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="count" id="count1">3000</div><span>cows</span>
<div class="count" id="count2">2000</div><span>sheep</span>
<div class="count" id="count3">1000</div><span>pigs</span>

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