数字滚动动效(纯HTML5版和Vue版本)

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

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

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

相关文章

网络参考资料搬运(3)

(1) Python: 使用Python打开新的终端(terminal)并执行语句 通过Python 打开各系统&#xff08;MAC, LINUX, WINDOWS&#xff09;下的终端 &#xff08;Terminal&#xff09; python执行shell脚本的几种方法 自己写Linux命令 用Python写个Linux系统命令 Python 使用sftp传输文件…

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState,Kotlin

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState&#xff0c;Kotlin import android.os.Bundle import android.util.Log import androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() {private val TAG "fly&…

NarrowBERT: Accelerating Masked Language Model Pretraining and Inference

本文是LLM系列文章&#xff0c;针对《NarrowBERT: Accelerating Masked Language Model Pretraining and Inference》的翻译。 NarrowBERT&#xff1a;加速掩蔽语言模型的预训练和推理 摘要1 引言2 NarrowBERT3 实验4 讨论与结论局限性 摘要 大规模语言模型预训练是自然语言处…

栈和队列的C++模拟实现

一、栈stack 1.介绍&#xff08;库里面的文档介绍&#xff09; 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对…

PositiveSSL的泛域名SSL证书

PositiveSSL是Sectigo旗下的一个子品牌&#xff0c;致力于为全球用户提供优质、高效的SSL证书服务。PositiveSSL以Sectigo强大的品牌影响力和全球网络为基础&#xff0c;秉承“安全、可靠、高效”的服务理念&#xff0c;为各类网站提供全面的SSL证书解决方案。今天就随SSL盾小编…

统信uos 1030 企业版 安装.net core环境

安装.net core步骤 添加密钥和包存储库 安装 .NET 之前&#xff0c;请运行以下命令&#xff0c;将 Microsoft 包签名密钥添加到受信任密钥列表&#xff0c;并添加包存储库wget https://packages.microsoft.com/config/debian/10/packages-microsoft-prod.deb -O packages-mic…

【LeetCode】71. 简化路径

1 问题 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&#xf…

HarmonyOS版本号,API level(updateing)

版本列表&#xff1a; OS名称API Ver工具更新特性更新Harmony4.0Beta102023年9月Harmony3.192023年5月OpenHarmony SDK 3.2.12.2 Toolchains 3.2.3.6 DevEco Studio 3.1.0.500Harmony3.1Beta292023年4月OpenHarmony SDK 3.2.5.8 Toolchains 3.2.3.2 DevEco Studio 3.1.0.400Ar…

收藏,安装报错信息汇总,MacOS上安装Adobe等软件/插件报错问题解决合集

打开允许“允许任何来源” 如何打开允许任何来源&#xff1f;在 Finder 菜单栏选择 【前往】 – 【实用工具 】&#xff0c;找到【终端】程序&#xff0c;双击打开&#xff0c;在终端窗口中输入&#xff1a;sudo spctl --master-disable 输入代码后&#xff0c;按【return 回车…

JVM第十七讲:调试排错 - Java 问题排查之Linux命令

调试排错 - Java 问题排查之Linux命令 本文是JVM第十七讲&#xff0c; Java 问题调试排错。Java 在线问题排查主要分两篇&#xff1a;本文是第一篇&#xff0c;通过linux常用命令排查。 文章目录 调试排错 - Java 问题排查之Linux命令在项目中&#xff0c;日志操作的常用命令1、…

Mac 远程桌面软件

对于使用 Mac 计算机和笔记本电脑的企业来说&#xff0c;适用于 Mac 的远程桌面软件变得越来越重要&#xff0c;随着远程工作变得越来越普遍&#xff0c;IT 管理员和组织需要一种安全的方式来访问和修复问题、处理紧急任务以及监控远程工作站的状态&#xff0c;为了促进远距离协…

【Edabit 算法 ★☆☆☆☆☆】Convert Hours into Seconds

【Edabit 算法 ★☆☆☆☆☆】Convert Hours into Seconds language_fundamentals math numbers Instructions Write a function that converts hours into seconds. Examples howManySeconds(2) // 7200 howManySeconds(10) // 36000 howManySeconds(24) // 86400Notes 60…

Java:ApacheHttpClient连接寿命(timeToLive)未配置问题分析

一、问题描述 若 Apache HttpClient 未设置 timeToLive&#xff0c;通过服务域名访问服务的实例并且服务域名解析出的 IP 发生变化时&#xff0c;在短时间内会有部分请求出现连接异常错误。 二、问题分析 Apache HttpClient 通过服务域名从连接池获取连接&#xff0c;当连接…

面试官:说说 HTTP 常见的请求头有哪些?

一、是什么 HTTP头字段&#xff08;HTTP header fields&#xff09;,是指在超文本传输协议&#xff08;HTTP&#xff09;的请求和响应消息中的消息头部分 它们定义了一个超文本传输协议事务中的操作参数 HTTP头部字段可以自己根据需要定义&#xff0c;因此可能在 Web 服务器…

项目知识点总结-过滤器-MD5注册-邮箱登录

&#xff08;1&#xff09;过滤器 使用过滤器验证用户是否登录 /** * Title: NoLoginFilter.java * Package com.qfedu.web.filter * Description: TODO(用一句话描述该文件做什么) * author Feri * date 2018年5月28日 * version V1.0 */ package com.gdsdx…

Linux---(三)基本指令大全

前提引入&#xff1a;历史上先出现的键盘还是鼠标&#xff1f; 答案&#xff1a;键盘 ✨所以刚开始的时候绝对没有图形化界面&#xff0c;因此操作系统刚开始兴起的时候绝对没有图形化界面&#xff0c;因为当时没有鼠标。 ✨因为没有图形化界面&#xff0c;只有键盘&#xff0c…

实时消息传送:WebSocket实现系统后台消息实时通知

实时消息传送&#xff1a;WebSocket实现系统后台消息实时通知 WebSocket简介基本实现步骤后台服务器后端接口SimpMessagingTemplate MessageDto前端客户端 示例应用 在现代Web应用中&#xff0c;提供实时通知对于改善用户体验至关重要。WebSocket技术允许建立双向通信通道&…

nginx常见报错及解决acme.sh给Nginx配置SSL证书

问题排查&#xff1a; nginx -t //检查配置是否正确只要返回ok就说明配置没问题。 Nginx报错Failed to restart nginx.service: Unit not found 解决方法&#xff1a; 1、在根目录下执行 vim /etc/init.d/nginx2、插入以下代码 #!/bin/sh # nginx - this script starts …

网络基础知识点

osi七层模型&#xff1a; 应用层&#xff1a;提供用户接口&#xff0c;与用户进行交互 表示层&#xff1a;进行数据格式的转换 会话层&#xff1a;建立、维护和验证会话 传输层&#xff1a;保证目标从源到目的地的传输&#xff08;传输协议和端口号&#xff09; 网络层&#x…

打造自己的前端组件库(奶妈版,超详细)

打造自己的前端组件库 demo是开源的&#xff0c;自己上npm 或者 github 上都能搜到 新建vue项目(sass js vue2) vue create yt-ui 修改文件目录(如下) 修改&#xff1a; 1.src 更名 examples; 2. src/components移动到项目最外层&#xff1b;3.vue.config.js更改入口文件 /…