js 数字翻滚效果

<div class="number-roll" id="numberRoll">0</div>

.number-roll {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  height: 1em; /* 与字体大小一致 */
  line-height: 1em;
}

function rollNumber(element, target, duration) {
  let current = parseInt(element.innerText);
  let start = performance.now();

  function animate(time) {
    let elapsed = time - start;
    let progress = Math.min(elapsed / duration, 1);
    let nextNumber = Math.floor(current + (target - current) * progress);

    element.innerText = nextNumber;

    if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      element.innerText = target; // 确保最终数字准确
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例
const numberRollElement = document.getElementById('numberRoll');
rollNumber(numberRollElement, 100, 1000); // 从当前数字翻滚到100，持续1秒