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

用前端html如何实现2024烟花效果

news 来源：原创 2025/6/28 18:52:27

用HTML、CSS和JavaScript编写的网页，主要用于展示“2024新年快乐！”的文字形式烟花效果。下面是对代码主要部分的分析：

HTML结构

包含三个<canvas>元素，用于绘制动画。
引入百度统计的脚本。

CSS样式

设置body的背景为黑色，并使得canvas元素绝对定位，覆盖整个页面。

JavaScript 功能

百度统计脚本：页面开始时引入了百度统计的脚本，用于网页访问数据分析。
获取URL参数：GetRequest函数用于解析URL中的查询字符串参数。
烟花碎片（Shard）类：
- 每个Shard代表烟花爆炸后的一个碎片。
- 包含碎片的位置、颜色、大小、速度等属性。
- draw方法用于在canvas上绘制碎片。
- update方法用于更新碎片的位置和状态。
火箭（Rocket）类：
- 表示发射的烟花火箭。
- 包含火箭的位置、速度、颜色等属性。
- draw方法用于在canvas上绘制火箭。
- update方法用于更新火箭的位置。
- explode方法用于模拟火箭爆炸，生成多个Shard实例。
初始化和动画循环：
- 获取所有canvas元素和对应的2D渲染上下文。
- 根据屏幕大小调整字体大小，以适应屏幕宽度，并在一个canvas上绘制“2024新年快乐！”文字。
- 通过读取绘制的文字的像素数据，确定烟花爆炸的目标位置。
- 使用requestAnimationFrame创建动画循环，不断更新和绘制火箭和碎片，模拟烟花效果。
辅助函数：
- lerp（线性插值函数）：用于平滑地在两个值之间插值，常用于动画效果中。

执行流程：

页面加载完成后，动画循环开始运行。
每隔一定帧数，生成一个新的Rocket实例，模拟火箭发射。
当火箭达到一定高度后，调用explode方法，生成多个Shard实例，模拟烟花爆炸。

碎片根据预设的目标位置移动，最终形成“2024新年快乐！”的文字形状。

<!DOCTYPE html>
<html lang="en">
<script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
</script><head><meta charset="UTF-8"><title>2024，新年快乐！</title>
</head>
<style>body {margin: 0;overflow: hidden;background: black;}canvas {position: absolute;}
</style><body><canvas></canvas><canvas></canvas><canvas></canvas><script>function GetRequest() {var url = decodeURI(location.search); //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);}}return theRequest;}class Shard {constructor(x, y, hue) {this.x = x;this.y = y;this.hue = hue;this.lightness = 50;this.size = 15 + Math.random() * 10;const angle = Math.random() * 2 * Math.PI;const blastSpeed = 1 + Math.random() * 6;this.xSpeed = Math.cos(angle) * blastSpeed;this.ySpeed = Math.sin(angle) * blastSpeed;this.target = getTarget();this.ttl = 100;this.timer = 0;}draw() {ctx2.fillStyle = `hsl(${this.hue}, 100%, ${this.lightness}%)`;ctx2.beginPath();ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);ctx2.closePath();ctx2.fill();}update() {if (this.target) {const dx = this.target.x - this.x;const dy = this.target.y - this.y;const dist = Math.sqrt(dx * dx + dy * dy);const a = Math.atan2(dy, dx);const tx = Math.cos(a) * 5;const ty = Math.sin(a) * 5;this.size = lerp(this.size, 1.5, 0.05);if (dist < 5) {this.lightness = lerp(this.lightness, 100, 0.01);this.xSpeed = this.ySpeed = 0;this.x = lerp(this.x, this.target.x + fidelity / 2, 0.05);this.y = lerp(this.y, this.target.y + fidelity / 2, 0.05);this.timer += 1;} elseif (dist < 10) {this.lightness = lerp(this.lightness, 100, 0.01);this.xSpeed = lerp(this.xSpeed, tx, 0.1);this.ySpeed = lerp(this.ySpeed, ty, 0.1);this.timer += 1;} else {this.xSpeed = lerp(this.xSpeed, tx, 0.02);this.ySpeed = lerp(this.ySpeed, ty, 0.02);}} else {this.ySpeed += 0.05;//this.xSpeed = lerp(this.xSpeed, 0, 0.1);this.size = lerp(this.size, 1, 0.05);if (this.y > c2.height) {shards.forEach((shard, idx) => {if (shard === this) {shards.splice(idx, 1);}});}}this.x = this.x + this.xSpeed;this.y = this.y + this.ySpeed;}}class Rocket {constructor() {const quarterW = c2.width / 4;this.x = quarterW + Math.random() * (c2.width - quarterW);this.y = c2.height - 15;this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;this.blastSpeed = 6 + Math.random() * 7;this.shardCount = 15 + Math.floor(Math.random() * 15);this.xSpeed = Math.sin(this.angle) * this.blastSpeed;this.ySpeed = -Math.cos(this.angle) * this.blastSpeed;this.hue = Math.floor(Math.random() * 360);this.trail = [];}draw() {ctx2.save();ctx2.translate(this.x, this.y);ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);ctx2.fillStyle = `hsl(${this.hue}, 100%, 50%)`;ctx2.fillRect(0, 0, 5, 15);ctx2.restore();}update() {this.x = this.x + this.xSpeed;this.y = this.y + this.ySpeed;this.ySpeed += 0.1;}explode() {for (let i = 0; i < 70; i++) {shards.push(new Shard(this.x, this.y, this.hue));}}}console.log(GetRequest('val').val)// INITIALIZATIONconst [c1, c2, c3] = document.querySelectorAll('canvas');const [ctx1, ctx2, ctx3] = [c1, c2, c3].map(c => c.getContext('2d'));let fontSize = 200;const rockets = [];const shards = [];const targets = [];const fidelity = 3;let counter = 0;c2.width = c3.width = window.innerWidth;c2.height = c3.height = window.innerHeight;ctx1.fillStyle = '#000';const text = '2024新年快乐！'let textWidth = 99999999;while (textWidth > window.innerWidth) {ctx1.font = `900 ${fontSize--}px Arial`;textWidth = ctx1.measureText(text).width;}c1.width = textWidth;c1.height = fontSize * 1.5;ctx1.font = `900 ${fontSize}px Arial`;ctx1.fillText(text, 0, fontSize);const imgData = ctx1.getImageData(0, 0, c1.width, c1.height);for (let i = 0, max = imgData.data.length; i < max; i += 4) {const alpha = imgData.data[i + 3];const x = Math.floor(i / 4) % imgData.width;const y = Math.floor(i / 4 / imgData.width);if (alpha && x % fidelity === 0 && y % fidelity === 0) {targets.push({ x, y });}}ctx3.fillStyle = '#FFF';ctx3.shadowColor = '#FFF';ctx3.shadowBlur = 25;// ANIMATION LOOP(function loop() {ctx2.fillStyle = "rgba(0, 0, 0, .1)";ctx2.fillRect(0, 0, c2.width, c2.height);//ctx2.clearRect(0, 0, c2.width, c2.height);counter += 1;if (counter % 15 === 0) {rockets.push(new Rocket());}rockets.forEach((r, i) => {r.draw();r.update();if (r.ySpeed > 0) {r.explode();rockets.splice(i, 1);}});shards.forEach((s, i) => {s.draw();s.update();if (s.timer >= s.ttl || s.lightness >= 99) {ctx3.fillRect(s.target.x, s.target.y, fidelity + 1, fidelity + 1);shards.splice(i, 1);}});requestAnimationFrame(loop);})();// HELPER FUNCTIONSconst lerp = (a, b, t) => Math.abs(b - a) > 0.1 ? a + t * (b - a) : b;function getTarget() {if (targets.length > 0) {const idx = Math.floor(Math.random() * targets.length);let { x, y } = targets[idx];targets.splice(idx, 1);x += c2.width / 2 - textWidth / 2;y += c2.height / 2 - fontSize / 2;return { x, y };}}</script></body></html>

步骤 1: 页面结构和引入脚本

HTML定义了三个canvas元素用于绘制烟花动画。
引入百度统计脚本，用于收集页面访问数据。
步骤 2: 样式设置
页面背景设置为黑色，canvas元素被设置为绝对定位，覆盖整个屏幕。
步骤 3: JavaScript 功能实现

3.1 获取URL参数
GetRequest函数解析当前URL的查询字符串，将参数保存在一个对象中返回。
3.2 定义烟花碎片（Shard）类
每个Shard实例代表烟花爆炸后的一个碎片。
包含位置、颜色、大小、速度等属性。
draw方法用于绘制碎片。
update方法用于更新碎片的状态和位置，包括模拟重力影响和向目标位置移动。
3.3 定义火箭（Rocket）类
每个Rocket实例代表一个发射的烟花火箭。
包含位置、速度、颜色等属性。
draw方法用于绘制火箭。
update方法用于更新火箭的位置，模拟火箭上升。
3.4 初始化和动画循环
初始化：根据屏幕大小调整字体大小，确保“2024新年快乐！”文字适应屏幕宽度，并在canvas上绘制该文字。通过读取文字像素数据来确定烟花爆炸的目标位置。
动画循环：使用requestAnimationFrame循环不断更新和绘制火箭和碎片，以及检测碎片是否达到目标位置或生命周期结束。
3.5 辅助函数
lerp函数：用于在两个数值之间进行线性插值，帮助平滑动画效果。
步骤 4: 执行动画
初始化画布：调整画布大小以适应窗口，绘制“2024新年快乐！”文字，并基于此文字的像素数据确定烟花目标位置。
启动动画循环：
- 每隔一定时间间隔，创建一个新的Rocket实例，模拟火箭发射。
- 更新每个火箭的位置，当火箭达到一定高度时触发爆炸，生成多个Shard实例。
- 更新每个Shard的位置，使其朝目标位置移动。
- 当Shard到达目标位置或生命周期结束时，从数组中移除。
渲染烟花效果：通过不断更新canvas上的火箭和碎片位置，以及绘制这些元素，形成动态的烟花效果。碎片最终会根据预设的目标位置排列，形成“2024新年快乐！”的文字形状。
通过这些步骤，代码实现了一个视觉吸引的新年烟花祝福动画，既展示了编程技巧，也增添了节日气氛。
explode方法在火箭达到顶点时被调用，生成多个Shard实例。

用前端html如何实现2024烟花效果

用HTML、CSS和JavaScript编写的网页，主要用于展示“2024新年快乐！”的文字形式烟花效果。下面是对代码主要部分的分析： HTML结构包含三个<canvas>元素，用于绘制动画。引入百度统计的脚本。 CSS样式设置body的背景为黑…...

编程日记 2025/6/28 18:52:27

Maven学习（传统Jar包管理、Maven依赖管理(导入坐标)、快速下载指定jar包）

目录一、传统Jar包管理。 （1）基本介绍。 （2）传统的Jar包导入方法。 1、手动寻找Jar包。并放置到指定目录下。 2、使用IDEA的库管理功能。 3、配置环境变量。 （3）传统的Jar包管理缺点。二、Maven。 &#…...

编程日记 2025/6/28 19:58:56

1 查看u盘的具体路径 diskutil list 根据容量确认路径 /dev/disk2 2、卸载u盘 diskutil unmountDisk /dev/disk2 3、把iso文件写入u盘 sudo dd if/Users/dengjinshan/Downloads/Win11_24H2_Chinese_Simplified_x64.iso of/dev/disk2 bs1m 4、弹出u盘 diskutil eject /dev/dis…...

编程日记 2025/6/28 19:34:40

MySQL数据库的数据类型

个人主页：C忠实粉丝欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝原创 MySQL数据库的数据类型收录于专栏[MySQL] 本专栏旨在分享学习MySQL的一点学习笔记，欢迎大家在评论区交流讨论💌 目录数据类型分类 …...

编程日记 2025/6/28 19:11:12

【golang】匿名内部协程，值传递与参数传递

代码例子下面代码的区别是直接调用循环变量，这里使用的就是这个变量的引用，而不是将参数的副本传递给协程执行 for task : range taskChan {wg.Add(1)go func() {defer wg.Done()task.Do() // 使用外部循环变量}() }func DistributeTasks(taskChan &…...

编程日记 2025/6/27 21:14:15

ByteByteGo-Top 9 HTTP Request Methods 9种HTTP请求方法

更详细准确的描述直接参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/CONNECT 本片文章出自 EP85: Top 9 HTTP Request Methods - ByteByteGo Newsletter http request methods 1，GET 从服务器获取资源。具有幂等性（idempo…...

编程日记 2025/6/28 19:24:23

vue3实际案例分析：展示Vue拖拽功能的实现和效果

在现代前端开发中，交互式的用户界面是提升用户体验的关键因素之一。Vue.js，作为一个渐进式JavaScript框架，提供了灵活的组件系统和响应式数据绑定，使得实现复杂的用户交互变得简单。拖拽功能是其中一个常见的交互模式，…...

编程日记 2025/6/28 18:32:55

EasyExcel使用管道流连接InputStream和OutputStream

前言 Java中的InputSteam 是程序从其中读取数据， OutputSteam是程序可以往里面写入数据。如果我们有在项目中读取数据库的记录， 在转存成Excel文件, 再把文件转存到OSS中。生成Excel使用的是阿里的EasyExcel 。他支持Output的方式写出文件内容。而…...

编程日记 2025/6/28 20:04:35

源码分析之Openlayers中的ZoomToExtent控件

概述在 Openlayers 中，ZoomToExtent控件可能用的不是很多，它主要用于将地图视图缩放到指定范围，应用场景就是重置地图、恢复初始状态。但是一般情况下，重置地图可能还会有其它操作，比如清除地图上绘制的点线面或者显…...

编程日记 2025/6/28 21:39:56

Acwing 算法基础课数学知识线性筛

线性筛素数也叫欧拉筛。 int pr[maxn]; bool flg[maxn]; int main() {for (int i 2; i < maxn; i) {if (!flg[i]) pr[pr[0]] i;for (int j 1; i * pr[j] < n && j < pr[0]; j) {flg[i * pr[j]] 1;if (i % pr[j] 0) break; // 重点}} }这样筛的话&…...

编程日记 2025/6/28 21:49:39

K8s驱逐阈值调整

要在 Kubernetes 中调整 kubelet 驱逐阈值，特别是针对 imagefs 和 nodefs 的大小阈值，你可以通过修改 kubelet 的启动参数来实现。这些参数定义了在触发 Pod 驱逐之前，节点上的资源使用情况必须满足的硬性条件。根据你提供的文件内容&#…...

编程日记 2025/6/28 20:33:07

【密码学】BUUCTF Crypto 1 - 12 题 WriteUp

今天，我在 BUUCTF 网站的 crypto section 开启了一场充满挑战的密码学之旅。这次我一口气完成了 12 个板块的任务，虽然耗时较长，但每一次解密成功的瞬间都让我无比满足，那种沉浸在密码世界里的感觉真的很棒。接下来&#xff0…...

编程日记 2025/6/29 14:14:20

【文献阅读】使用深度语音后验改进独立于说话者的构音障碍可懂度分类

原文名称： IMPROVED SPEAKER INDEPENDENT DYSARTHRIA INTELLIGIBILITY CLASSIFICATION USING DEEPSPEECH POSTERIORS 本文探讨了利用DeepSpeech后验概率改进说话人无关的构音障碍可理解性分类方法。作者提出了一个基于DeepSpeech（一种端到端的语音转文本引擎）输出的新特征集…...

编程日记 2025/6/28 21:20:20

Image Stitching using OpenCV

文章目录简介图像拼接管道特征检测和提取特征检测特征提取特征匹配强力匹配FLANN（近似最近邻快速库）匹配单应性估计扭曲和混合结论使用opencv进行图像拼接原为url: https://medium.com/paulsonpremsingh7/image-stitching-using-opencv-a-step-by-s…...

编程日记 2025/6/28 20:28:49

如何将CSDN的文章保存为PDF？

目录 1、打开CSDN文章2、按F12或者鼠标右键选择检查并进入控制台3、在控制台输入以下代码4、然后回车（Enter）如果纵向显示不全就横向 1、打开CSDN文章 2、按F12或者鼠标右键选择检查并进入控制台 3、在控制台输入以下代码 (function(){ $("#side&q…...

编程日记 2025/6/28 21:44:37

设计模式之工厂模式：从汽车工厂到代码工厂

~犬📰余~ “我欲贱而贵，愚而智，贫而富，可乎？ 曰：其唯学乎” 工厂模式概述想象一下你走进一家4S店准备买车。作为顾客，你不需要知道汽车是如何被制造出来的，你只需要告诉销售顾问&a…...

编程日记 2025/6/28 21:38:33

在 Ubuntu 20.04 上离线安装和配置 Redis

下面是从零开始配置 Redis 的完整步骤，包括从安装 Redis 到离线安装 Redis 包的步骤。本文将覆盖如何从下载 Redis 安装包、手动安装 Redis、创建所需目录、配置 Redis、以及如何配置 Redis 为系统服务，确保服务可以在启动时自动运行。步骤 1: 准备环境…...

编程日记 2025/6/29 8:52:48

Redis的哨兵机制

目录 1. 文章前言2. 基本概念2.1 主从复制的问题2.2 人工恢复主节点故障2.3 哨兵机制自动恢复主节点故障 3. 安装部署哨兵（基于docker）3.1 安装docker3.2 编排redis主从节点3.3 编排redis-sentinel节点 4. 重新选举5. 选举原理6. 总结 1. 文章前言 &…...

编程日记 2025/6/28 21:36:53

服务器数据恢复—热备盘上线过程中硬盘离线导致raid5阵列崩溃的数据恢复案例

服务器数据恢复环境： 两组分别由4块SAS接口硬盘组建的raid5阵列，两组raid5阵列划分LUN并由LVM管理，格式化为EXT3文件系统。服务器故障： RAID5阵列中一块硬盘未知原因离线，热备盘自动激活上线替换离线硬盘。在热备盘上…...

编程日记 2025/6/28 19:55:29

Android12 设置无home属性的apk为launcher

目标apk的包类名 QSSI.12/device/qcom/qssi/system.prop// add start target_app_package_name=com.mangechargespot.app target_app_class_name=com.mangechargespot.app.ui.activity.SplashActivity // add end...

编程日记 2025/6/28 19:38:48

STM32F407+LAN8720A +LWIP +FreeRTOS ping通

使用STM32CUBEIDE自带的 LWIP和FreeROTS 版本说明STM32CUBEIDE 操作如下1. 配置RCC/SYS2. 配置ETH/USART3. 配置EHT_RESET/LED4. 配置FreeRTOS5. 配置LWIP6. 配置时钟7. 生成单独的源文件和头文件，并生成代码8. printf重定义9. ethernetif.c添加lan8720a复位10. MY_LWIP_Init …...

编程日记 2025/6/28 20:07:04

构建虚幻引擎中的HUD与UI

在游戏开发中，用户界面（UI）和头部显示（HUD）是玩家体验的重要组成部分。它们提供了关键信息，并增强了游戏的互动性。虚幻引擎（Unreal Engine, UE）以其强大的可视化脚本系统Blueprint和C++ API支持，为开发者提供了一个灵活且功能丰富的环境来创建复杂的UI和HUD元素。本…...

编程日记 2025/6/27 19:21:15

EXCEL数据清洗的几个功能总结备忘

目录 0 参考教材 1 用EXCEL进行数据清洗的几个功能 2 删除重复值： 3 找到缺失值等 4 大小写转换 5 类型转化 6 识别空格 0 参考教材精通EXCEL数据统计与分析，中国，李宗璋用EXCEL学统计学，日EXCEL统计分析与决策&#x…...

编程日记 2025/6/28 20:08:10

【CSS in Depth 2 精译_076】12.4 @font-face 的工作原理

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac…...

编程日记 2025/6/28 19:33:41

深入源码解析：Spring Boot 如何加载 Servlet 、Filter 与 Listener

我们知道，Spring Boot 是在 Spring MVC 的基础上进行了封装，以简化开发者的工作量。尽管如此，Spring Boot 的底层架构依然离不开 Spring MVC 的核心组件，如 Servlet、Filter、Listener，以及RequestMappingHandlerMappi…...

编程日记 2025/6/28 19:38:33

Vue 让视图区域滑到指定位置、回到顶部

滑倒指定位置：获取指定的dom，然后用scrollIntoView使dom出现在视图区域回到顶部：操作父级dom的scrollTop 0，让该父级下的列表回到顶部代码如下 <template><div class"testDemo"><div><el-bu…...

编程日记 2025/6/28 17:31:26

C# 属性（Property）

C# 属性（Property） C# 中的属性（Property）是一种用于访问和设置类或结构成员的值的特殊类型的方法。属性允许开发者以字段的形式访问方法，提供了更为安全和灵活的数据封装。在本文中，我们将深入探讨 C# 属性的概念、用途、以及如何有效地使用它们。属性的定义属性由…...

编程日记 2025/6/28 1:34:55

Ubuntu20.04调整swap分区大小笔记

Ubuntu20.04调整swap分区大小笔记参考：https://blog.csdn.net/sunyuhua_keyboard/article/details/142485764 第一步禁用swap $ cat /etc/fstab # /etc/fstab: static file system information. # # Use blkid to print the universally unique identifier fo…...

编程日记 2025/6/28 20:10:19

【 JAVA中常见的集合操作】

JAVA中常见的集合操作 Java 提供了丰富的集合框架（Java Collections Framework），包括多种集合接口和实现类。集合操作可以分为基本操作和高级操作。下面介绍一些常见的集合操作，并给出相应的代码示例。基本集合操作创建集合 …...

编程日记 2025/6/28 16:21:24

Kudu 源码编译-aarch架构 1.17.1版本

跟着官方文档编译第一个问题：在make阶段时会报的问题： kudu/src/kudu/util/block_bloom_filter.cc:210:3: error: ‘vst1q_u32_x2’ was not declared in this scope kudu/src/kudu/util/block_bloom_filter.cc:436:5: error: ‘vst1q_u8_x2’ was no…...

编程日记 2025/6/28 18:14:17

JavaEE多线程案例之阻塞队列

上文我们了解了多线程案例中的单例模式，此文我们来探讨多线程案例之阻塞队列吧 1. 阻塞队列是什么？ 阻塞队列是⼀种特殊的队列.也遵守"先进先出"的原则. 阻塞队列是⼀种线程安全的数据结构,并且具有以下特性: 当队列满的时候,继续⼊队列就会…...

编程日记 2025/6/28 19:33:07

Java Web 开发学习中：过滤器与 Ajax 异步请求

一、过滤器 Filter： 过滤器的概念与用途在一个庞大的 Web 应用中，有许多资源需要受到保护或进行特定的预处理。过滤器就像是一位智能的守卫，站在资源的入口处，根据预先设定的规则，决定哪些请求可以顺利访问资源&…...

编程日记 2025/6/28 20:27:45

git SSL certificate problem: unable to get local issuer certificate

Git 客户端将会验证服务器端提供的SSL证书是否由受信任的证书颁发机构（Certification Authority，CA）签发。如果Git客户端无法找到或验证本地签发者证书，就会出现 unable to get local issuer certificate 或类似的错误。该问题一…...

编程日记 2025/6/28 18:55:13

Vue.js 响应接口

Vue.js 响应接口 Vue.js，作为一个流行的前端JavaScript框架，以其响应式数据绑定和组件化开发而闻名。响应式系统是Vue.js的核心特性之一，它允许开发者创建高度动态和交互式的用户界面。本文将深入探讨Vue.js的响应接口，包括其工作原理、使用方法和最佳实践。响应式原理 …...

编程日记 2025/6/29 12:25:39

vue2-代理打包问题；CORS针对AJAX 请求，而不适用于资源请求

打包后请求被转发出现问题（如返回 405 Method Not Allowed），通常是由以下原因导致的： 1. 代理配置未生效原因分析在开发环境中，Vue CLI 的 devServer.proxy 仅在本地开发服务器（npm run serve&#xff…...

编程日记 2025/6/28 19:43:13

websocket 服务 pinia 全局配置

websocket 方法类 // stores/webSocketStore.ts import { defineStore } from "pinia";interface WebSocketStoreState {ws: WebSocket | null; // WebSocket 实例callbacks: ((message: string) > void)[]; // 消息回调函数列表connected: boolean; // 连接状态…...

编程日记 2025/6/28 18:50:19

YOLO系列正传（二）YOLOv3论文精解(上)——从FPN到darknet-53

系列文章 YOLO系列基础 YOLO系列基础合集——小白也看得懂的论文精解-CSDN博客 YOLO系列正传 YOLO系列正传系列（一）类别损失与MSE损失函数、交叉熵损失函数-CSDN博客背景随着YOLOv11版本的发布，YOLO算法在视觉检测领域独领风骚&#x…...

编程日记 2025/6/28 18:28:41

可视化建模与UML《部署图实验报告》

一、实验目的： 1、熟悉部署图的基本功能和使用方法。 2、掌握使用建模工具软件绘制部署图的方法二、实验环境： window11 EA15 三、实验内容： 根据以下的描述，绘制部署图。网上选课系统在服务器端使用了两台主机，一…...

编程日记 2025/6/28 20:09:12

详解RabbitMQ在Ubuntu上的安装

目录 Ubuntu 环境安装安装Erlang 查看Erlang版本退出命令编辑安装RabbitMQ 确认安装结果安装RabbitMQ管理界面启动服务查看服务状态通过IP:port访问添加管理员用户给用户添加权限再次访问 Ubuntu 环境安装安装Erlang RabbitMq需要…...

编程日记 2025/6/27 21:00:56

SQL 快速参考

SQL 快速参考引言 SQL（Structured Query Language）是一种用于管理关系数据库管理系统（RDBMS）的标准编程语言。它被广泛用于数据查询、数据更新、数据库维护以及访问控制。本快速参考指南旨在提供SQL的基本概念和常用命令的概览…...

编程日记 2025/6/28 18:30:26

数据结构--树和二叉树

树和二叉树的定义树的定义树是一种非线性的数据结构，它模拟了具有层次关系的数据的集合。在树结构中，存在以下基本概念： 节点（Node）：树的每个元素被称为节点。根节点（Root Node&#xff09…...

编程日记 2025/6/28 19:26:54

R语言的数据结构-向量

【图书推荐】《R语言医学数据分析实践》-CSDN博客《R语言医学数据分析实践李丹宋立桓蔡伟祺清华大学出版社9787302673484》【摘要书评试读】- 京东图书 (jd.com) R语言编程_夏天又到了的博客-CSDN博客在R语言中，数据结构是非常关键的部分，它提…...

编程日记 2025/6/28 20:25:27

MetaGPT源码（ContextMixin 类）

目录理解 ContextMixin什么是 ContextMixin？主要组件实现细节测试 ContextMixin示例：ModelX1. 配置优先级2. 多继承3. 多继承重写4. 配置优先级在本文中，我们将探索 ContextMixin 类，它在多重继承场景中的集成及其在 Python 配…...

编程日记 2025/6/28 19:48:00

linux中top命令详解

top 命令是 Linux 系统中常用的实时系统监控工具，它可以显示系统的实时进程和资源占用情况。以下是 top 命令的一些基本用法和参数详解： 基本用法 • top：运行 top 命令，显示系统实时监控信息。 • top -h：显示帮助信…...

编程日记 2025/6/28 21:29:16

Scrapy与MongoDB

Scrapy可以在非常短的时间里获取大量的数据。这些数据无论是直接保存为纯文本文件还是CSV文件，都是不可取的。爬取一个小时就可以让这些文件大到无法打开。这个时候，就需要使用数据库来保存数据了。 MongoDB由于其出色的性能，已经成为爬虫的首…...

编程日记 2025/6/28 19:16:51

【Linux-ubuntu通过USB传输程序点亮LED灯】

Linux-ubuntu通过USB传输程序点亮LED灯一,初始化GPIO配置1.使能时钟2.其他寄存器配置二，程序编译三，USB传输程序一,初始化GPIO配置 1.使能时钟使能就是一个控制信号，用于决定时钟信号是否能够有效的传递或者被使用，就像一个…...

编程日记 2025/6/28 19:50:36

onlyoffice 容器配置修改后制作镜像导出以及上传到 dockerhub

1.将容器制作成新的镜像 docker commit -p -a "xxx" -m "zh-cn-20-100" onlyoffice ooffice:7.1.1.23docker commit: 这是 Docker 中用于创建新镜像的命令。 -p: 这个选项用于在提交之前暂停容器的运行。这可以确保数据的完整性，因为容器在提交…...

编程日记 2025/6/28 21:29:08

开发者如何使用GCC提升开发效率 Windows下Cmake + NDK 交叉编译 Libyuv

最近在导入其他项目的libyuv库，编译时发现如下问题，刚好想做一期libyuv编译与安装到AS中的文章，故记录集成的全过程报错如下 error: no member named ABGRToNV21 in namespace libyuv; did you mean ARGBToNV21? error: no member named …...

编程日记 2025/6/28 18:04:18

前端H5移动端基础框架模板：Vue3 + Vite5 + Pinia + Vant4 + Sass + 附源码

技术栈选用 Vue3 Vite5 Pinia Vant4 Sass 源码地址： git clone https://gitee.com/gaiya001/h5-APP.git1. 1.vite.config.js文件配置 ** import { defineConfig } from vite // 导入 Vite 的配置函数 import vue from vitejs/plugin-vue // 导入 Vue 插件 i…...

编程日记 2025/6/28 19:22:02

华为HCIP H12-821考试中心原题题库更新完成展示如下

全题库506题，后期有更新会及时更新维护，确保答案正确率和原题覆盖率。附上最新通过成绩单一张今天新鲜出炉 ...

编程日记 2025/6/28 19:59:30

HTML结构

CSS样式

JavaScript 功能

步骤 1: 页面结构和引入脚本

步骤 2: 样式设置

3.1 获取URL参数

3.3 定义火箭（Rocket）类

3.5 辅助函数

相关文章：