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

news2024/11/20 4:50:46

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1195921.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华硕荣获“EPEAT Climate+ Champion”永续先驱称号

华硕持续深耕永续理念,努力提供低碳排放、高效能产品,并被全球电子委员会授予“EPEAT Climate Champion”称号。这一荣誉再次表明了华硕在永续管理方面的承诺,并凸显了华硕在追求永续发展上的决心。 华硕通过设立“科学基础减碳目标”、“再生…

lv11 嵌入式开发 ARM体系结构理论基础(异常、微架构)4

1 异常概念 处理器在正常执行程序的过程中可能会遇到一些不正常的事件发生 这时处理器就要将当前的程序暂停下来转而去处理这个异常的事件 异常事件处理完成之后再返回到被异常打断的点继续执行程序 2 异常处理机制 不同的处理器对异常的处理的流程大体相似&#xff0c…

一种ADC采样算法,中位值平均滤波+递推平均滤波

前言 在实际AD采集场景中,会出现周期性变化和偶然脉冲波动干扰对AD采集的影响 这里使用中位值平均滤波递推平均滤波的结合 参考前人写好的代码框架,也参考博主GuYH_下面这篇博客,在此基础上稍作修改,写出这篇博客,能…

基于超宽带技术的人员定位系统源码,spring boot+ vue+ mysql定位系统源码

​UWB定位技术源码 超宽带技术的人员定位系统源码 UWB人员定位系统是一种基于超宽带技术的人员定位系统,它通过发送和接收超短脉冲信号,在测距方面可以达到微米级精度。这种系统通常需要具备高精度的定位能力,通常需要达到微米级别&#xff0…

ceph-deploy bclinux aarch64 ceph 14.2.10

ssh-copy-id,部署机免密登录其他三台主机 所有机器硬盘配置参考如下,计划采用vdb作为ceph数据盘 下载ceph-deploy pip install ceph-deploy 免密登录设置主机名 hostnamectl --static set-hostname ceph-0 .. 3 配置hosts 172.17.163.105 ceph-0 172.…

局部路由守卫component守卫

局部路由守卫component守卫 component守卫(beforeRouteEnter、beforeRouteLeave) 代码位置:在路由组件中,代码是写在component当中的(XXX.vue)beforeRouteEnter、beforeRouteLeave都有三个参数&#xff1…

python Flask框架,调用MobileNetV2图像分类模型,实现前端上传图像分类

python Flask框架,调用MobileNetV2图像分类模型,实现前端上传图像分类 今天博主介绍一个图像分类的小项目 基于flask 和mobileNetV2模型的前端图像分类项目 环境配置如下: python版本3.7.6 安装库的版本如下: tensorflow 2.11.…

单挑特斯拉,华为智选车迈入第二阶段

文丨刘俊宏 编丨王一粟 华为智选车的节奏越来越快。 11月9日,华为跟奇瑞打造的首款C级纯电轿车智界S7发布,预售价为25.8万起。 在发布会上,华为常务董事、终端BG CEO、智能汽车解决方案BU董事长余承东采取手机以往最惯用的对标营销手法&a…

蓝桥杯算法心得——拼数(排列型回溯dfs)

大家好,我是晴天学长,排列型的dfs,在一些需要暴搜的题中很中很重要,需要的小伙伴可以关注支持一下哦!后续会继续更新的。💪💪💪 1) .拼数 2) .算法思路 超级递归 1.遍历数组&#…

想要和猫妹一起学Python吗?快进群吧

这是一篇2024年猫妹学Python新同学召集令,感兴趣的朋友可以看下。 初始Python 猫爸第一次被Python惊艳,是几年前的一个风格迁移程序。 国外某大学的一篇博士论文,为风格迁移提供了理论支撑。 下载到模型之后,就可以用简单的Py…

Linux的基本指令(1)

目录 快速认识的几个指令 pwd指令 mkdir指令 touch指令 cd指令 clear指令 whoami指令 ls指令 ls -l ls -la ls 目录名 ls -ld 目录名 文件 路径 路径是什么? 路径的形成 ​ 怎么保证路径必须有唯一性? ls -la隐藏文件 隐藏文件的是什…

UnRaid安装安装仓库管理系统GreaterWMS

文章目录 0、前言1、安装流程1.1、克隆GreaterWMS项目到UnRaid本地目录1.2、修改项目前后端端口1.3、修改baseurl1.4、修改Nginx.conf配置文件1.5、安装依赖插件1.5.1、Docker Compose Manager插件1.5.2、Python3环境 1.6、创建GreaterWMS容器1.6.1、为前后端启动脚本赋执行权限…

C++ static关键字

C static关键字 1、概述2、重要概念解释3、分情况案例解释3.1 static在类内使用3.2 static在类外使用案例一:案例二:案例三 1、概述 static关键字分为两种情况: 1.在类内使用 2.在类外使用 2、重要概念解释 (1)翻译…

keepalived+Nginx+邮件

实验场景: 我使用keepalived保证nginx的高可用,我想知道什么时候ip发生漂移,可以让ip发生漂移的时候 我的邮箱收到消息. 如果对keepalived不了解,这有详细解释:keepalived与nginx与MySQL-CSDN博客https://blog.csdn.ne…

在Spring Boot中使用JTA实现对多数据源的事务管理

了解事务的都知道,在我们日常开发中单单靠事务管理就可以解决绝大多数问题了,但是为啥还要提出JTA这个玩意呢,到底JTA是什么呢?他又是具体来解决啥问题的呢? JTA JTA(Java Transaction API)是…

思维模型 梅拉宾法则

1 梅拉宾法则的应用 1.1 演讲口才中的梅拉宾法则应用 苹果公司的演讲:苹果公司的演讲一直以来都以其独特的风格和效果著称。苹果公司的演讲者在演讲中注重运用肢体语言和声音等非语言因素,如手势、表情和语调等,来增强演讲的效果。例如&am…

Linux文件类型与权限及其修改

后面我们写代码时,写完可能会出现没有执行权限什么的,所以我们要知道文件都有哪些权限和类型。 首先 就像我们之前目录结构图里面有个/dev,它就是存放设备文件的,也就是说,哪怕是一个硬件设备,例如打印机啥的&#xf…

Linux学习教程(第一章 简介)3

第一章 简介 七、Linux系统的优缺点 前面章节提到,相比 Windows 系统,Linux 系统有更好的稳定性,那么除此之外,Linux 系统还有那些优点(或者不足)呢?本节带领大家详细了解一下。 1、大量的可…

【Kurbernetes集群】Pod资源、Pod资源限制和Pod容器的健康检查(探针)详解

Pod资源 一、Pod概述1.1 Pod的定义1.2 一个Pod能包含几个容器?1.3 Pod的分类1.3.1 控制器管理的Pod1.3.2 自主式Pod1.3.3 静态Pod 1.4 Pod中容器的分类1.4.1 Pause容器1.4.2 初始化容器1.4.3 应用容器 1.5 Pod常见的状态 二、Pod中的策略2.1 镜像拉取策略2.2 Pod中容…

另辟奚径-Android Studio调用Delphi窗体

大家都知道Delphi能调用安卓SDK,比如jar、aar等, 但是反过来,能在Android Studio中调用Delphi开发的窗体吗? 想想不太可能吧, Delphi用的是Pascal,Android Studio用的是Java,这两个怎么能混用…