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

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

news 2025/6/19 23:00:07

数字从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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/6/19 11:24:28

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/6/19 15:09:16

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/6/16 20:31:12

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/6/16 21:07:45

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/18 0:49:32

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/6/17 19:47:22

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/6/15 19:46:15

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/6/17 2:00:03

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/6/15 11:17:52