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

前端开发攻略---用JavaScript打造炫酷数字变化动画效果：手写实现你的自定义动画函数！支持更改任意数字、动画速度

news 2026/2/7 18:22:13

1、演示

2、介绍

这篇文章将向您展示如何使用JavaScript来创建一个自定义的动画函数，以实现数字变化效果。我们将深入了解前端动画的本质，并通过手写代码来实现这个炫酷的数字变化动画效果。您将学到如何利用JavaScript来操作DOM元素，控制动画的过程和效果，以及如何提升用户体验和网页交互性。无论您是初学者还是有经验的开发者，本文都将为您提供有益的知识和实用的技巧，让您能够轻松创建令人惊艳的前端动画效果。 

3、动画的本质

前端动画的本质在于通过在网页上操作元素的样式和属性，以创建视觉上的变化和动态效果。这些效果可以吸引用户的注意力，提升用户体验，以及增强网页的交互性。实现前端动画的方法通常包括使用CSS动画、JavaScript动画或者结合两者。CSS动画适用于简单的动画效果，而JavaScript动画则更加灵活，可以实现更复杂的动态效果，同时也能够通过手动控制动画的时间、速度和过渡效果来实现更精细的控制。无论是哪种方法，前端动画的本质都是通过在网页上操作元素的样式和属性，以创造出令人愉悦和吸引人的视觉效果。

说白了就是在一段时间里面，一个数字变换到另一个数字，本质就是数字的变化

4、requestAnimationFrame

当涉及到前端动画时，requestAnimationFrame 是一个非常重要的工具。它是一个专门为动画设计的 JavaScript 方法，能够在浏览器下一次重绘之前执行指定的函数，从而创建平滑流畅的动画效果。

使用 requestAnimationFrame 的基本用法是在动画循环中调用它。通常，您会在动画函数中递归调用 requestAnimationFrame，以便在每一帧都更新动画状态并进行下一次重绘。这样可以确保动画在浏览器的渲染间隙中进行，避免了因为在间隙内的不必要渲染而引起的性能问题。

下面是 requestAnimationFrame 的基本用法示例：

function animate() {// 更新动画状态// 绘制动画// 递归调用 requestAnimationFramerequestAnimationFrame(animate);
}// 启动动画
animate();

通过结合 requestAnimationFrame 和其他 JavaScript 技术，您可以创建出令人印象深刻的交互式和动态的前端效果。

5、源码及注释（您只需要copy然后改成你想要的样子就行了）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>button {padding: 5px 10px;}</style></head><body><button>打折</button><span>价格：</span><span class="price">40000</span></body><script>const btn = document.querySelector('button')const label = document.querySelector('.price')// 1、点击按钮的时候将一个数字变换为另一个数字btn.addEventListener('click', function () {// 封装一个 animation函数// 参数表示的意思：动画的时间 起始数字 结束数字 回调函数animation(5000, 40000, 40, val => {console.log(val)label.textContent = val.toFixed(2)})})function animation(duration, from, to, onProgress) {let value = fromconst start = Date.now()// 变化速度const speed = (to - from) / duration// _run函数：让value一点一点变化function _run() {// 1、改变value的值const t = Date.now() - startif (t >= duration) {value = toonProgress(value)return}// 总值 = 起点值 + 变化时间 * 变化速度value = from + t * speedonProgress(value)// 2、注册下一次的变化requestAnimationFrame(_run)}// 一开始执行_run()}</script>
</html>

相关文章：

前端开发攻略---用JavaScript打造炫酷数字变化动画效果：手写实现你的自定义动画函数！支持更改任意数字、动画速度

1、演示 2、介绍 这篇文章将向您展示如何使用JavaScript来创建一个自定义的动画函数&#xff0c;以实现数字变化效果。我们将深入了解前端动画的本质&#xff0c;并通过手写代码来实现这个炫酷的数字变化动画效果。您将学到如何利用JavaScript来操作DOM元素&#xff0c;控制动画…...

编程日记 2024/4/12 16:57:31

【学习】移动端兼容性测试有什么方法及重要性

随着移动互联网的快速发展&#xff0c;移动应用程序已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;由于各种移动设备的硬件和软件差异&#xff0c;移动应用程序的兼容性问题也越来越突出。因此&#xff0c;移动端兼容性测试成为了一个重要的环节&#xff0c;它可以…...

编程日记 2024/4/12 16:56:29

记录linux从0部署java项目（宝塔）

目录 一、安装宝塔可视化界面 二、部署前端 三、部署后端 1、配置并连接Mysql数据库 2、配置并连接redis 3、安装jdk 这里先记录一个安装后遇到的问题 安装openJDK 四、检查 一、安装宝塔可视化界面 宝塔面板下载&#xff0c;免费全能的服务器运维软件 运行安装脚本 安…...

编程日记 2024/4/12 16:55:28

Python的时间和日期：探索datetime模块

&#x1f680; 个人主页&#xff1a;xmp65535 &#x1f680; 专栏&#xff1a;python技术专栏 目录 一、前言 二、datetime 模块简介 三、基本使用 1.日期和时间的创建 2.获取当前日期和时间 3.时间戳与日期时间之间的转换 4.时间运算 5.格式化日期和时间 6.解析字符串…...

编程日记 2024/4/12 16:54:27

代理与反向代理

Java项目的代理与反向代理 1. 代理 定位&#xff1a;为客户端服务通信方向&#xff1a;客户端->代理服务器->远程服务器好处&#xff1a;对客户端行为进行过滤和控制&#xff1b;隐藏客户端IP地址&#xff1b;审计流量&#xff1b;缓存资源加快访问速度&#xff1b; 2…...

编程日记 2024/4/12 16:51:23

长风破浪会有时，直挂云帆济沧海

仅以此篇记录生活琐事&#xff0c;因为自己在初中就天天写日记&#xff0c;到了大学自己写日记的次数逐渐少了下来。 最近心不在焉&#xff0c;不知道为啥&#xff0c;也许是因为压力吧。在我这个年龄阶段的压力也许不一样吧&#xff0c;过几天又要参加自考的考试&#xff0c;自…...

编程日记 2024/4/12 16:50:22

jAavascript基础积累

深拷贝与浅拷贝 深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是在编程中常用的概念&#xff0c;它们指的是复制对象或数组时的不同方式。让我们来详细解释它们&#xff0c;并列举一些例子&#xff1a; 浅拷贝&#xff08;Shallow C…...

编程日记 2024/4/12 16:46:17

神经网络训练中batch的作用

在神经网络训练中&#xff0c;batch的作用主要包括以下几个方面&#xff1a; 减少内存占用和计算成本&#xff1a;在训练神经网络时&#xff0c;需要加载并处理大量的数据。使用batch训练可以将数据分成较小的批次&#xff0c;每次处理一小部分数据&#xff0c;从而减少内存占用…...

编程日记 2024/4/12 16:44:14

【grpc】grpc进阶一，再回首protobuf

在之前的章节里&#xff0c;我们了解了 protobuf 的基本规则和使用方法&#xff0c;生成了 grpc 代码并成功运行。那么我们还要思考一个问题&#xff0c;protobuf 文件到底该如何管理。我们知道 grpc 是区分客户端和服务端的&#xff0c;一般而言&#xff0c;客户端和服务端是分…...

编程日记 2024/4/12 16:43:13

iframe嵌入Vue页面实现免登方法

简介&#xff1a;实现一个功能需要使用iframe嵌入其它系统内部的一个页面&#xff0c;但嵌入后出现一个问题&#xff0c;就是一打开这个页面就会自动跳转到登录页&#xff0c;原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的&#xff0c;本文就是解决这个问题的。 …...

编程日记 2024/4/12 16:40:10

详解TCP/IP五层模型

目录 一、什么是TCP五层模型&#xff1f; 二、TCP五层模型的详细内容 1. 应用层 2. 传输层 3. 网络层 4. 数据链路层 5. 物理层 三、网络设备所在分层 封装和分⽤ 三、Java示例 引言&#xff1a; 在网络通信中&#xff0c;TCP/IP协议是至关重要的。为了更好地理解TCP协议的工…...

编程日记 2024/4/12 16:38:08

开创加密资产新纪元：深度解析ERC-314协议

随着加密资产市场的不断发展和区块链技术的日益成熟&#xff0c;新的协议和标准不断涌现&#xff0c;其中包括了ERC-314协议。本文将深入分析ERC-314协议的特点、功能以及对加密资产市场可能产生的影响。 1. ERC-314协议简介 ERC-314协议是一项建立在以太坊区块链上的新提案&a…...

编程日记 2024/4/12 16:37:06

Rust 实战练习 - 9. 文本编码，URL编码，加密解密

编解码 编程工作中&#xff0c;很复杂的一个环节的就是编解码和多语言。这里只讨论编解码的工作。 目标&#xff1a; 常见文本编码的转换&#xff08;GBK, Shift-JIS, UTF8, Unicode, ASCII)Web中常用的编码常见的加密算法(md5, sha1, HMAC, AES/DES, RSA) encoding/decodi…...

编程日记 2024/4/12 16:35:04

linux环境openfile限制

/etc/security/limits.conf 是 Linux 系统中用于设置用户资源限制的配置文件。这个文件允许系统管理员为每个用户或用户组设置各种资源限制&#xff0c;以防止用户滥用系统资源。 这个文件中的每一行都定义了一个资源限制。每一行通常包含以下字段&#xff08;由空格或冒号分隔…...

编程日记 2024/4/12 16:34:03

python之pandas数据导入和导出

目录 Pandas 常用数据导入Pandas 常用数据导出数据导入示例CSV 文件&#xff1a;指定导入文件的编码格式添加列标题 Excel 文件&#xff1a;JSON 文件&#xff1a;数据库&#xff1a;HTML 表格&#xff1a;Clipboard&#xff1a;HDF5 文件&#xff1a;Feather 文件&#xff1a;…...

编程日记 2024/4/12 16:33:01

Docker 集成 redis，并在nacos进行配置时需要注意点

安装redis镜像 docker pull redis:6.0.6redis配置文件 创建相关配置文件 mkdir /apps/redis cd /apps/redis touch redis.conf vim redis.confredis.conf内容&#xff1a; #开启保护 protected-mode yes #开启远程连接 bind 0.0.0.0 #自定义密码 port 6379 timeout 0 # 900s内…...

编程日记 2024/4/12 16:27:54

数据库系统工程师考试大纲

数据库系统工程师考试大纲主要包括以下几个方面的考试要求&#xff1a; 1.掌握计算机体系结构以及各主要部件的性能和基本工作原理。 2.掌握操作系统、程序设计语言的基础知识&#xff0c;了解编译程序的基本概念。 3.熟练掌握常用数据结构和常用算法。 4.熟悉软件工程和软件开…...

编程日记 2024/4/12 16:24:51

（Java）数据结构——图（第七节）Folyd实现多源最短路径

前言 本博客是博主用于复习数据结构以及算法的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 Folyd实现原理 中心点的概念 感觉像是充当一个桥梁的作用 还是这个图 我们常在一些讲解视频中看到&#xff0c;就比如dist&#xff08;-1&#xff09;&#xff0…...

编程日记 2024/4/12 16:23:49

使用Python进行高效的多线程HTTP请求

在处理网络请求时&#xff0c;尤其是当需要大量请求相同或不同的URL时&#xff0c;采用多线程的方式可以显著提高效率。本文介绍了如何使用Python的concurrent.futures模块实现多线程HTTP请求。 为什么使用多线程&#xff1f; 多线程可以让CPU和网络资源得到更有效的利用。在…...

编程日记 2024/4/12 16:20:45

如何利用OceanBase v4.2的 外部表简化外部数据处理

为什么需要使用外表 在日常的业务场景中&#xff0c;经常遇到需要在数据库中处理外部数据的情况&#xff0c;这些数据可能来源于应用程序&#xff0c;或者是其他业务系统。一般来说&#xff0c;常是通过ETL工具将外部数据库的数据导入到数据库内部的表中&#xff0c;再进行分析…...

编程日记 2024/4/12 16:18:42

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41