js 实现数字滚动效果,从 0 加到目标值,并且重复执行

实现效果

js 方法

• 方法接收的参数 为目标值

const  showNumber=ref(1999)
const animateNumber = (target: number) => {
  let current = 0
  const increment = (target - current) / (2000 / 16) // 计算每次递增的值，这里假设动画每16毫秒执行一次
  const interval = setInterval(() => {
    current += increment
    if (current >= target) {
      current = target
      clearInterval(interval) // 当达到目标值时清除定时器
      setTimeout(() => {
        animateNumber(target) // 一段时间后重新开始动画
      }, 5000) // 例如，这里设置2秒后重新开始动画
    }
    showNumber.value = Math.ceil(current)
  }, 16)
}