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

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

news 2026/3/28 0:03:26

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

Win32下用libigl+GLFW3渲染3D模型的完整配置指南（附常见错误排查）

Win32下用libiglGLFW3渲染3D模型的完整配置指南&#xff08;附常见错误排查&#xff09; 在Windows平台进行3D图形开发时&#xff0c;libigl与GLFW3的组合为开发者提供了强大的工具集。libigl作为一个轻量级的C几何处理库&#xff0c;与GLFW3这一跨平台的OpenGL窗口管理库结合…...

编程新知 2026/3/27 22:58:30

3步释放20GB空间：给Android用户的系统减负指南

3步释放20GB空间&#xff1a;给Android用户的系统减负指南 【免费下载链接】universal-android-debloater Cross-platform GUI written in Rust using ADB to debloat non-rooted android devices. Improve your privacy, the security and battery life of your device. 项目…...

编程新知 2026/3/27 22:58:30

终极指南：如何在.NET应用中快速集成VLC多媒体播放功能

终极指南&#xff1a;如何在.NET应用中快速集成VLC多媒体播放功能 【免费下载链接】Vlc.DotNet .NET control that hosts the audio/video capabilities of the VLC libraries 项目地址: https://gitcode.com/gh_mirrors/vl/Vlc.DotNet Vlc.DotNet是一个强大的.NET库&am…...

编程新知 2026/3/27 21:11:46

python-flask-djangol框架的高校毕业生就业信息实习管理系统

目录需求分析与功能规划技术选型与架构设计数据库模型设计功能模块实现数据统计与可视化测试与部署文档与维护项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与功能规划 明确系统核心目标为管理高校毕业生就业和实习信…...

编程新知 2026/3/27 20:49:38

如何选择适合的单北斗变形监测一体机以提升基础设施安全？

本文将重点讨论如何选择适合的单北斗变形监测一体机&#xff0c;以增强基础设施的安全性。在当前基础设施建设快速发展的背景下&#xff0c;单北斗GNSS的应用显得尤为重要。通过深入理解单北斗变形监测的原理&#xff0c;用户能够更好地把握设备的核心优势&#xff0c;尤其是在…...

编程新知 2026/3/27 19:53:04

Prompt Optimizer

链接&#xff1a;https://pan.quark.cn/s/3d42e4512934Prompt Optimizer v2.2.1是一款开源AI提示词优化工具&#xff0c;致力于通过智能算法提升提示词质量&#xff0c;支持多模型集成和图像生成功能。它提供桌面应用、Docker部署等多种方式&#xff0c;帮助用户快速获得精准的…...

编程新知 2026/3/27 18:54:45

零基础养龙虾：OpenClaw部署从入门到上手，一篇讲透！

2026年&#xff0c;OpenClaw&#xff08;昵称 “龙虾”&#xff09;凭借 “能真正动手干活” 的核心能力&#xff0c;成为开源AI Agent领域的顶流。它不仅能像ChatGPT一样聊天&#xff0c;更能自主操作电脑——整理文件、控制浏览器、发送邮件、甚至调用硬件设备。因其图标酷似…...

编程新知 2026/3/27 17:43:59

别再死记硬背Sarsa公式了！用Python手搓一个‘胆小’的迷宫探索AI（附完整代码）

用Python打造胆小如鼠的迷宫AI&#xff1a;Sarsa算法实战图解 当你在迷宫中小心翼翼地贴着墙走&#xff0c;生怕掉进陷阱时——恭喜&#xff0c;你已经理解了Sarsa算法的核心思想。今天我们不谈枯燥的数学公式&#xff0c;而是用Python构建一个会"瑟瑟发抖"的迷宫探索…...

编程新知 2026/3/27 17:01:35

效率倍增：用快马生成jdk一键配置脚本与docker环境模板

效率倍增&#xff1a;用快马生成JDK一键配置脚本与Docker环境模板 每次新换电脑或者重装系统&#xff0c;最头疼的就是重新配置开发环境。特别是Java开发&#xff0c;光是下载JDK、配置环境变量就得折腾半天。最近发现用InsCode(快马)平台可以快速生成自动化脚本&#xff0c;把…...

编程新知 2026/3/27 16:27:22

AtlasOS系统性能优化指南：从诊断到维护的全流程解决方案

AtlasOS系统性能优化指南&#xff1a;从诊断到维护的全流程解决方案 【免费下载链接】Atlas &#x1f680; An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atl…...

编程新知 2026/3/27 16:15:21