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

目标值,并且重复执行"/>

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

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

实现效果

js 方法

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

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