当前位置： 首页 > news >正文

数字滚动动效（纯HTML5版和Vue版本）

news 2026/1/24 12:22:30

数字从0到指定数字的滚动动效，直接上代码；

H5

<!DOCTYPE html>
<html>
<head><style>/* 设置数字显示的样式 */.counter {font-weight:700;font-size: 36px;color: #333;}</style>
</head>
<body><div class="counter">0</div><script>const targetNumber = 1000; // 指定的目标数字const duration = 10000; // 动画持续时间，单位为毫秒const counterElement = document.querySelector('.counter'); // 获取数字显示的元素let startTime = null; // 动画开始时间function step(timestamp) {console.log(timestamp)if (!startTime) startTime = timestamp; // 记录动画开始时间const progress = timestamp - startTime; // 计算动画进度console.log(progress,timestamp,startTime)// 根据动画进度计算当前数字的值const currentNumber = Math.round(targetNumber * (progress / duration));counterElement.textContent = currentNumber; // 更新数字显示if (progress < duration) {// 继续下一帧动画requestAnimationFrame(step);//60FPS执行一次，延时器//60FPS = 一帧} else {// 动画结束，显示最终数字counterElement.textContent = targetNumber;}}// 启动动画requestAnimationFrame(step);</script>
</body>
</html>

Vue

以Vue3为例，Vue同理，使用的时候，只需要往封装的组件中传入目标数字即可

RollNumber.vue<template><!-- 数字滚动组件 --><div class="counter">{{ count }}</div>
</template>
<script setup>
import { onMounted } from "vue";
// const targetNumber = 100; // 指定的目标数字
const duration = 1200; // 动画持续时间，单位为毫秒
const count = ref(0); // 获取数字显示的元素
const props = defineProps(["targetNumber"]);
let startTime = null; // 动画开始时间
function step(timestamp) {if (!startTime) startTime = timestamp; // 记录动画开始时间const progress = timestamp - startTime; // 计算动画进度// 根据动画进度计算当前数字的值const currentNumber = Math.round(+props.targetNumber * (progress / duration));count.value = currentNumber; // 更新数字显示if (progress < duration) {// 继续下一帧动画requestAnimationFrame(step);} else {// 动画结束，显示最终数字count.value = props.targetNumber;}
}
onMounted(() => {requestAnimationFrame(step);
});
</script>
<style scoped lang="scss">
.counter {font-size: 24px;font-weight: 800;
}
</style>
 <CommonRollNumber :targetNumber="2"></CommonRollNumber>

相关文章：

数字滚动动效（纯HTML5版和Vue版本）

数字从0到指定数字的滚动动效&#xff0c;直接上代码&#xff1b; H5 <!DOCTYPE html> <html> <head><style>/* 设置数字显示的样式 */.counter {font-weight:700;font-size: 36px;color: #333;}</style> </head> <body><div cl…...

编程日记 2023/10/22 1:30:40

Leetcode—2530.执行K次操作后的最大分数【中等】(C语言向上取整数学公式)

2023每日刷题&#xff08;五&#xff09; Leetcode—2530.执行K次操作后的最大分数 向上取整思想 参考了这篇文章 有人肯定会问&#xff0c;这个向上取整为什么是这样来的。接下来我简单讲解一下。 数学式&#xff1a; x y 数学式&#xff1a;\frac{x}{y} 数学式&#xff1a…...

编程日记 2023/10/22 1:29:40

CMakeList 编写示例

cmake_minimum_required(VERSION 3.8) #指定cmake的最小版本 set(PROJECT_NAME Untitled_1) #初始化变量 project(${PROJECT_NAME} VERSION 1.0) #创建一个project set(CMAKE_AUTOMOC ON) #初始化内置变量, 该变量为Qt工程专属变量 set(CMAKE_AUTORCC ON) set(CMAKE_A…...

编程日记 2023/10/22 1:28:39

OSI笔记

由7层组成&#xff0c;由下自上分别为&#xff1a; 物理层&#xff08;硬件方面&#xff0c;例如物理网络设备、布线电缆、光纤等&#xff09;&#xff0c; 传输数据主要是比特流0 1 、电信号数据链路层&#xff08;确定了0 1 的分组方式&#xff0c;通过广播的方式&#xff0…...

编程日记 2023/10/22 1:27:38

C++之前置声明

在C中&#xff0c;前置声明是一种声明类或函数的方式&#xff0c;但并不定义它们。 前置声明的主要目的是为了解决编译时的依赖性问题&#xff0c;提高编译效率&#xff0c;并允许更灵活的代码组织。 原理 C前置声明可以减少头文件依赖的原理在于&#xff0c;通过前置声明&am…...

编程日记 2023/10/22 1:26:37

用3D扫描生成合成数据

合成数据集&#xff08;Synthetic Datasets&#xff09;正在成为计算机视觉模型训练的标准部分。 虽然新工具使合成数据集变得更容易访问&#xff0c;但除了标准机器学习过程之外&#xff0c;许多工具还需要对 3D 建模有基本的了解。 最简单的捷径是从现实世界中获取现有对象并…...

编程日记 2023/10/22 1:25:36

pip安装依赖报错

执行命令时 pip install --upgrade pip 报错&#xff1a; pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。pip install --upgrade pip~~~ Category…...

编程日记 2023/10/22 1:24:35

规范的项目流程图怎么写

编写规范的项目流程图可以遵循以下步骤&#xff1a; 1.明确项目目标&#xff1a;首先&#xff0c;明确项目的目标以及需要实现的结果。这有助于确定项目的范围和要求。 2.识别项目任务&#xff1a;识别和列出所有的任务&#xff0c;这可以包括获得资源、实施动作、收集信息等…...

编程日记 2023/10/22 1:23:35

模型部署笔记--Pytorch-FX量化

目录 1--Pytorch-FX量化 2--校准模型 3--代码实例 3-1--主函数 3-2--prepare_dataloader函数 3-3--训练和测试函数 1--Pytorch-FX量化 Pytorch在torch.quantization.quantize_fx中提供了两个API&#xff0c;即prepare_fx和convert_fx。 prepare_fx的作用是准备量化&#…...

编程日记 2023/10/22 1:22:34

解决XXLJOB重复执行问题--Redis加锁+注解+AOP

基于Redis加锁注解AOP解决JOB重复执行问题 现象解决方案自定义注解定义AOP策略redis 加锁实践 现象 线上xxljob有时候会遇到同一个任务在调度的时候重复执行&#xff0c;如下图&#xff1a; 线上JOB服务运行了2个实例&#xff0c;有时候会重复调度到同一个实例&#xff0c;有…...

编程日记 2023/10/22 1:21:33

云安全(1)--初识容器逃逸之特权容器逃逸

文章目录 前言privileged,特权容器逃逸环境配置实际利用实际环境利用计划任务/var/spool/cron/crontabs/ 适用于ubuntu debain/var/spool/cron 适用于centos ld.so.preloadssh 前言 在10.15号的上海中华武数杯的渗透赛里做到了一个k8s的题目&#xff0c;这应该是我第一次在比赛…...

编程日记 2023/10/22 1:20:32

二阶系统时域响应

二阶系统微分方程 二阶系统传递函数 二阶系统单位阶跃响应 过阻尼系统 临界阻尼系统 欠阻尼系统 无阻尼系统 二阶系统阶跃响应仿真 在Matlab中进行仿真&#xff0c;设置不同阻尼比2、1、0.5和0&#xff0c;可以得到结论&#xff1a; 阻尼比越小&#xff0c;系统响应速度越快&…...

编程日记 2023/10/22 1:19:31

mstsc改端口为33389

windows 远程默认端口3389不太安全&#xff0c;改成33389防下小人 把下面的2个文本存在后缀.reg的文件&#xff0c;双击导入注册表&#xff0c;"PortNumber"dword:0000826d 这个就是33389对应的端口号的16进制值&#xff0c;要想自己改成其它的换下值即可 Windows …...

编程日记 2023/10/22 1:18:31

经典算法试题（二）

文章目录 一、岁数1、题目2、思路讲解3、代码实现4、结果 二、打碎的鸡蛋1、题目2、思路讲解3、代码实现4、结果 三、分糖1、题目2、思路讲解3、代码实现4、结果 四、兔子产子1、题目2、思路讲解3、代码实现4、结果 五、矩阵问题1、题目2、思路讲解3、代码实现4、结果 六、谁是…...

编程日记 2023/10/22 1:17:30

Linux——生产者消费者模型

目录 一.为何要使用生产者消费者模型 二.生产者消费者模型优点 三.基于BlockingQueue的生产者消费者模型 1.BlockingQueue——阻塞队列 2.实现代码 四.POSIX信号量 五.基于环形队列的生产消费模型 一.为何要使用生产者消费者模型 生产者消费者模式就是通过一个容器来解决生…...

编程日记 2023/10/22 1:16:29

Oracle缓存表

Oracle缓存表&#xff08;db_buffer_pool&#xff09;由三部分组成&#xff1a; buffer_pool_defualt buffer_pool_keep buffer_pool_recycle 如果要把表钉死在内存中&#xff0c;也就是把表钉在keep区。相关的命令为&#xff1a; alter table 表名 storage(buffer_pool k…...

编程日记 2023/10/22 1:15:28

智能变电站自动化系统的应用与产品选型

摘要&#xff1a;现如今&#xff0c;智能变电站发展已经成为了电力系统发展过程中的内容&#xff0c;如何提高智能变电站的运行效率也成为电力系统发展的一个重要目标&#xff0c;为了能够更好地促进电力系统安全稳定运行&#xff0c;本文则就智能变电站自动化系统的实现进行了…...

编程日记 2023/10/22 1:14:27

reactnative 底部tab页面@react-navigation/bottom-tabs

使用react-navigation/native做的页面导航和tab‘ 官网&#xff1a;https://reactnavigation.org/docs/getting-started 效果图 安装 npm install react-navigation/nativenpm install react-navigation/bottom-tabs封装tabbar.js import { View, StyleSheet, Image } from …...

编程日记 2023/10/22 1:12:25

运维中心—监控大盘

一、监控大盘内容分类 1、告警 2、业务趋势 3、异常码 4、主机 5、服务状态 6、系统账单 二、API分类 【基础数据】 1、分组查询各自子系统 2、子系统查询名下各个微服务 【主机】 根据分组查询主机信息&#xff0c;按照子系统分组&#xff0c;按照CPU和内存排序 步骤&#xf…...

编程日记 2023/10/22 1:11:24

Node.js的安装

直接在浏览器中搜索Node.js即可 打开下载好的文件 验证是否安装成功 在cmd中输入 node -v&#xff0c;若结果为版本号那就是成功的 环境配置 配置全局模块所在的路径缓存cache的路径 在安装目录中新建两个文件夹&#xff0c;文件夹名为:node_cache和node_global 输…...

编程日记 2023/10/22 1:10:22

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/1/24 0:21:10

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/1/24 7:31:07

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/1/23 19:46:48

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/1/19 6:22:30

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/1/20 19:44:56

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/19 2:44:14

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2026/1/15 6:49:47