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

最新推荐文章于 2024-08-16 10:12:21 发布

Gik99

最新推荐文章于 2024-08-16 10:12:21 发布

阅读量863

点赞数

分类专栏： js 文章标签： javascript typescript

本文链接：https://blog.csdn.net/gik99/article/details/134344499

版权

js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文介绍如何使用JavaScript实现一个数字从0逐渐滚动到目标值的动画效果，并且在达到目标值后暂停，经过一段时间后自动重新开始。通过setInterval计算递增值并更新显示的数字。

摘要由CSDN通过智能技术生成

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)
}