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

【520 特辑】用 HTML/CSS/JavaScript 打造浪漫炫酷的表白网页

news 来源：原创 2025/7/15 19:53:35

一、前言

在 520 这个充满爱意的日子里，程序员该如何用代码表达浪漫？本文将分享一个结合动画特效与交互设计的 520 表白网页案例，通过 HTML/CSS/JavaScript 实现动态爱心、渐变背景、浮动文字等炫酷效果，手把手教你用技术传递心意。

二、技术选型与实现思路

2.1 核心技术栈

HTML：构建页面结构，包含标题、爱心图形、告白文案、交互按钮等元素
CSS：采用 Tailwind CSS 框架快速实现响应式布局，结合自定义动画实现动态效果
JavaScript：通过 DOM 操作生成背景爱心粒子，实现按钮点击交互逻辑

2.2 设计思路

视觉层次：通过渐变背景、模糊滤镜、文字阴影打造立体感
动态效果：利用 CSS3 动画实现爱心浮动、跳动、闪烁等动态效果
交互逻辑：点击按钮触发告白内容渐显，增强用户参与感
响应式设计：使用 CSS clamp 函数和媒体查询适配不同屏幕尺寸

三、关键技术实现详解

3.1 浪漫背景构建

3.1.1 爱心粒子背景

// JavaScript生成随机爱心粒子
function createHearts() {const container = document.getElementById('heartContainer');const totalHearts = window.innerWidth < 768 ? 30 : 60; // 移动端减少粒子数量for (let i = 0; i < totalHearts; i++) {const heart = document.createElement('div');const size = Math.random() * 20 + 10; // 生成10-30px大小的爱心heart.innerHTML = '<i class="fa-solid fa-heart"></i>';heart.className = 'absolute text-love-light text-shadow animate-sparkle';heart.style.cssText = `font-size: ${size}px;left: ${Math.random() * 100}vw;top: ${Math.random() * 100}vh;animation-duration: ${Math.random() * 3 + 2}s; // 随机动画时长opacity: ${Math.random() * 0.5 + 0.3}; // 随机透明度`;container.appendChild(heart);}
}

技术要点：
- 使用 Font Awesome 图标库的爱心符号
- 通过随机函数生成位置、大小、动画时长等参数
- requestAnimationFrame优化动画性能（案例中简化为定时器）

3.1.2 渐变背景与模糊效果

/* Tailwind CSS自定义样式 */
.bg-gradient-to-br from-love-dark to-love-light {background: linear-gradient(to bottom right, #FF2E63, #FF4B91);
}.backdrop-blur-xl {backdrop-filter: blur(20px);
}

通过径向渐变实现从深粉到浅粉的背景过渡
使用backdrop-filter实现毛玻璃效果增强层次感

3.2 动态爱心动画

3.2.1 SVG 爱心图形

<!-- 跳动的爱心 -->
<div class="heart absolute w-full h-full animate-beat"><svg viewBox="0 0 100 90" width="100%" height="100%"><path d="M49.8,7.5 C37.9,7.5 28.6,18.3 28.6,30.3 c0,12 9.3,22.8 21.2,34.8 c11.9,-12 21.2,-22.8 21.2,-34.8 C71.1,18.3 61.8,7.5 49.8,7.5 Z" fill="#FF4B91" /></svg>
</div>

使用 SVG 路径绘制标准爱心形状
通过animate-beat动画实现心跳效果：

@keyframes beat {0%, 100% { transform: scale(1); }50% { transform: scale(1.2); }
}

3.2.2 浮动动画

.animate-float {animation: float 6s ease-in-out infinite;
}@keyframes float {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}

通过 Y 轴位移模拟漂浮效果
ease-in-out缓动函数使动画更自然

3.3 交互逻辑实现

3.3.1 告白按钮点击事件

document.getElementById('confessionBtn').addEventListener('click', function() {const messageContainer = document.getElementById('messageContainer');this.style.display = 'none'; // 隐藏按钮// 延迟显示告白内容，避免动画冲突setTimeout(() => {messageContainer.classList.remove('hidden');messageContainer.style.opacity = '1';}, 100);
});

使用classList控制元素显示 / 隐藏
通过opacity渐变实现淡入效果
延迟处理确保动画连贯

3.3.2 响应式设计

/* 使用clamp函数实现字体自适应 */
.text-[clamp(2.5rem,8vw,5rem)] {font-size: clamp(2.5rem, 8vw, 5rem);
}/* 移动端优化 */
@media (max-width: 768px) {.love-text { font-size: clamp(1rem, 3vw, 1.5rem); }
}

clamp(min, val, max)根据视口宽度自动调整字体大小
媒体查询针对移动端减少背景粒子数量

四、完整代码与演示效果

4.2 完整 HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>520 浪漫时刻</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><script>tailwind.config = {theme: {extend: {colors: {love: {DEFAULT: '#FF4B91',light: '#FF7EB9',dark: '#FF2E63'},soft: {pink: '#FFD1DC',purple: '#D8BFD8',gold: '#FFD700'}},fontFamily: {romantic: ['Dancing Script', 'cursive', 'sans-serif']}}}}</script><style type="text/tailwindcss">@layer utilities {.text-shadow {text-shadow: 0 0 10px rgba(255, 75, 145, 0.8);}.text-shadow-lg {text-shadow: 0 0 20px rgba(255, 75, 145, 0.9), 0 0 30px rgba(255, 75, 145, 0.8);}.animate-float {animation: float 6s ease-in-out infinite;}.animate-beat {animation: beat 1.5s ease-in-out infinite;}.animate-fade-in {animation: fadeIn 2s ease-in-out forwards;}.animate-slide-up {animation: slideUp 1.5s ease-out forwards;}.animate-sparkle {animation: sparkle 1.5s infinite;}}@keyframes float {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }}@keyframes beat {0%, 100% { transform: scale(1); }50% { transform: scale(1.2); }}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}@keyframes slideUp {from { transform: translateY(50px); opacity: 0; }to { transform: translateY(0); opacity: 1; }}@keyframes sparkle {0%, 100% { opacity: 1; }50% { opacity: 0.6; }}</style><link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-love-dark to-love-light min-h-screen overflow-x-hidden flex flex-col items-center justify-center p-4"><!-- 背景爱心 --><div id="heartContainer" class="fixed inset-0 pointer-events-none z-0"></div><!-- 主内容 --><div class="relative z-10 text-center max-w-3xl mx-auto"><h1 class="text-[clamp(2.5rem,8vw,5rem)] font-romantic font-bold text-white text-shadow-lg mb-8 animate-fade-in">520 <span class="text-soft-gold">我爱你</span></h1><div class="w-64 h-64 mx-auto mb-12 relative animate-float"><div class="absolute inset-0 bg-love/30 rounded-full blur-3xl"></div><div class="heart absolute w-full h-full animate-beat" style="--scale: 1;"><svg viewBox="0 0 100 90" width="100%" height="100%"><path d="M49.8,7.5 C37.9,7.5 28.6,18.3 28.6,30.3 c0,12 9.3,22.8 21.2,34.8 c11.9,-12 21.2,-22.8 21.2,-34.8 C71.1,18.3 61.8,7.5 49.8,7.5 L49.8,7.5 Z" fill="#FF4B91" /></svg></div></div><div class="bg-white/10 backdrop-blur-xl rounded-2xl p-8 shadow-2xl animate-slide-up delay-300"><p class="text-[clamp(1.2rem,3vw,1.8rem)] font-romantic text-white mb-6 leading-relaxed">你是我生命中最美的遇见，<br>像星辰点缀了我的夜空，<br>每一天都因你而变得温柔。<br>520，我爱你，不止今天。</p><div class="mt-10 flex justify-center"><button id="confessionBtn" class="bg-love hover:bg-love-dark text-white font-bold py-4 px-10 rounded-full text-lg shadow-lg hover:shadow-love/50 transition-all duration-300 transform hover:scale-105 animate-sparkle"><i class="fa-solid fa-heart mr-2"></i> 爱的告白</button></div></div><div id="messageContainer" class="mt-10 bg-white/10 backdrop-blur-xl rounded-2xl p-8 shadow-2xl opacity-0 transition-opacity duration-1000 hidden"><p class="text-[clamp(1.2rem,3vw,1.5rem)] font-romantic text-white mb-6 leading-relaxed">从遇见你的那一刻起，<br>我的世界便有了不一样的色彩。<br>你的笑容如阳光般温暖，<br>你的眼神如星辰般璀璨。<br><br>是你让我懂得了什么是爱，<br>什么是生命中最重要的东西。<br>每一天醒来想到你，<br>都是我最大的幸福。<br><br>无论风雨还是晴天，<br>我都想牵着你的手一起走过。<br>520，我爱你，永远不变。</p><div class="mt-8 flex justify-center"><div class="relative"><div class="absolute inset-0 bg-soft-gold/30 rounded-full blur-xl animate-pulse"></div><div class="relative text-soft-gold text-4xl"><i class="fa-solid fa-heart animate-beat"></i></div></div></div></div></div><!-- 漂浮文字 --><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 10%; left: 15%; animation: float 8s ease-in-out infinite;">爱你</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 25%; right: 10%; animation: float 10s ease-in-out 2s infinite;">永远</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 60%; left: 20%; animation: float 9s ease-in-out 1s infinite;">唯一</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 80%; right: 25%; animation: float 7s ease-in-out 3s infinite;">陪伴</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 40%; left: 35%; animation: float 11s ease-in-out 1.5s infinite;">心动</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 70%; left: 10%; animation: float 8.5s ease-in-out 2.5s infinite;">珍惜</div><div class="love-text absolute text-white text-shadow opacity-70 text-[clamp(1rem,3vw,1.5rem)]" style="top: 30%; right: 30%; animation: float 9.5s ease-in-out 0.5s infinite;">甜蜜</div></div><script>// 创建背景爱心function createHearts() {const container = document.getElementById('heartContainer');const totalHearts = window.innerWidth < 768 ? 30 : 60;for (let i = 0; i < totalHearts; i++) {const heart = document.createElement('div');const size = Math.random() * 20 + 10;heart.innerHTML = '<i class="fa-solid fa-heart"></i>';heart.className = 'absolute text-love-light text-shadow animate-sparkle';heart.style.fontSize = `${size}px`;heart.style.left = `${Math.random() * 100}vw`;heart.style.top = `${Math.random() * 100}vh`;heart.style.animationDuration = `${Math.random() * 3 + 2}s`;heart.style.opacity = (Math.random() * 0.5 + 0.3).toString();container.appendChild(heart);}}// 告白按钮点击事件document.getElementById('confessionBtn').addEventListener('click', function() {const messageContainer = document.getElementById('messageContainer');this.style.display = 'none';messageContainer.classList.remove('hidden');// 延迟显示以获得更好的动画效果setTimeout(() => {messageContainer.style.opacity = '1';}, 100);});// 窗口大小变化时重新创建爱心window.addEventListener('resize', function() {const container = document.getElementById('heartContainer');container.innerHTML = '';createHearts();});// 页面加载完成后创建爱心window.addEventListener('load', function() {createHearts();});</script>
</body>
</html>

五、优化方向与扩展思路

性能优化：
- 使用requestAnimationFrame替代定时器
- 对背景粒子进行离屏检测，销毁不可见元素
交互增强：
- 添加鼠标悬停爱心跟随效果
- 实现告白内容滚动动画
视觉升级：
- 加入粒子碰撞效果
- 添加动态光影变化
功能扩展：
- 集成音频播放（告白语音）
- 添加分享到社交平台功能

六、总结

通过 HTML/CSS/JavaScript 的巧妙结合，我们不仅实现了充满仪式感的 520 表白网页，更展示了前端技术在创意表达中的无限可能。关键技术点包括：

CSS3 动画与渐变背景的灵活运用
SVG 图形与字体图标的结合
响应式设计与移动端适配
事件监听与 DOM 操作实现交互逻辑

希望这个案例能为你的技术创作带来灵感，用代码书写属于自己的浪漫故事。520，让我们用技术传递爱！❤️

【520 特辑】用 HTML/CSS/JavaScript 打造浪漫炫酷的表白网页

一、前言在 520 这个充满爱意的日子里，程序员该如何用代码表达浪漫？本文将分享一个结合动画特效与交互设计的 520 表白网页案例，通过 HTML/CSS/JavaScript 实现动态爱心、渐变背景、浮动文字等炫酷效果，手把手教你用技术传递心意…...

编程日记 2025/7/15 19:53:35

【QT】QTableWidget获取width为100，与真实值不符问题解决

背景用stackedWidget内嵌2个QTableWidget页面，实现切换。在进行stackedWidget.width()的获取时候，可以正常获得ui界面设置的宽度值，但是在QTableWidget页面用同样的方式无法成功获取真实值，即使采用获取内容区域宽度&#xff08…...

编程日记 2025/7/15 19:19:18

Hive drop column 的解决方法

示例： 创建 text 格式的表 create table t1(c1 int, c2 int) stored as textfile;增加一个字段 alter table t1 add columns (c3 int);使用 replace columns 删除新加的字段 alter table t1 replace columns (c1 int, c2 int);对于 ORC 类型的表，使用…...

编程日记 2025/7/15 19:30:28

Python虚拟环境再PyCharm中自由切换使用方法

Python开发中的环境隔离是必不可少的步骤，通过使用虚拟环境可以有效地管理不同项目间的依赖，避免包冲突和环境污染。虚拟环境是Python官方提供的一种独立运行环境，每个项目可以拥有自己单独的环境，不同项目之间的环境互不影响。在日常开发中，结合PyCharm这样强大的IDE进行…...

编程日记 2025/7/15 19:12:11

Spark大数据分析案例（pycharm）

所需文件（将文件放在路径下，自己记住后面要用）： 通过百度网盘分享的文件：beauty_p....csv等4个文件链接：https://pan.baidu.com/s/1pBAus1yRgefveOc7NXRD-g?pwd22dj 提取码：22dj 复制这段内…...

编程日记 2025/7/10 14:15:55

【QT】ModbusTCP读写寄存器类封装

背景在编写ModbusTCP时候，连接、寄存器读写属于通用的功能，为了便于后续直接复用，选择封装到一个类。本博文在封装展示该类过程中，会提及到编写该类过程中，出现的连接未成功的问题，以及该问题的解决方式。…...

编程日记 2025/7/9 20:33:11

SQLMesh 内置宏详解：@PIVOT等常用宏的核心用法与示例

本文系统解析 SQLMesh 的四个核心内置宏，涵盖行列转换的 PIVOT、精准去重的 DEDUPLICATE、灵活生成日期范围的 DATE_SPINE，以及动态表路径解析的 RESOLVE_TEMPLATE。通过真实案例演示参数配置与 SQL 渲染逻辑，并对比宏调用与传统 SQL 的差异&…...

编程日记 2025/7/15 19:51:11

ajax post请求解决自动再get请求一次

ajax post请求解决自动再get请求一次 HTMLjavascriptFlask第一种方法：第二种方法： HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title></head> &l…...

编程日记 2025/7/15 19:05:13

当前主流的传输技术（如OTN、IP-RAN、FlexE等）

好的！当前主流的传输技术（如OTN、IP-RAN、FlexE等）各有其独特的应用场景，下面我会逐一展开讲解，并结合实际案例说明它们如何在不同领域发挥作用。一、OTN（光传送网） 1. 核心特点大容量&…...

编程日记 2025/7/15 18:56:54

利用 SQL Server 作业实现异步任务处理，简化系统架构

在现代企业系统中，异步任务是不可或缺的组成部分，例如： 电商系统中的订单超时取消； 报表系统中的异步数据导出； CRM 系统中的客户积分计算。传统的实现方式通常涉及引入消息队列（如 RabbitMQ、Kafka&a…...

编程日记 2025/7/15 18:56:03

【Java高阶面经】3.熔断机制深度优化：从抖动治理到微服务高可用架构实战

一、熔断抖动的本质剖析与核心成因 1.1 熔断机制的核心价值与抖动危害熔断机制作为微服务弹性架构的核心组件，通过模拟电路断路器逻辑，在服务出现异常时自动阻断请求链，防止故障扩散引发雪崩。但频繁的“熔断-恢复-熔断”抖动会导致：用户体验恶化：请求成功率波动大，响…...

编程日记 2025/7/10 12:28:38

如何删除 HP 笔记本电脑中的所有数据：3 种解决方案说明

当您准备删除 HP 笔记本电脑中的所有数据时，无论是为了保护您的隐私还是为设备重新启动做好准备，使用正确的方法非常重要。在本文中，您可以获得 3 个有效的解决方案，帮助您轻松删除计算机中的所有内容。之后，您可以安全…...

编程日记 2025/7/12 21:50:05

以太联 - Intellinet 闪耀台北 SecuTech 国际安全科技应用博览会

2025 年 5 月 7 日至 9 日，台北 SecuTech 国际安全科技应用博览会现场热闹非凡，以太联 - Intellinet 携旗下前沿产品与解决方案精彩亮相，成为展会上一道亮丽的风景线，吸引了众多业内人士的目光，收获了广泛关注与高度认…...

编程日记 2025/7/15 19:51:11

JavaScript性能优化实战（13）：性能测试与持续优化

在前面的系列文章中，我们探讨了各种JavaScript性能优化的方法和实战案例。然而，优化工作不应仅是一次性的努力，而应当成为开发流程中的常态。本篇将聚焦于如何建立系统化的性能测试体系，并实现持续的性能优化机制，确保应用长期保持出色的性能表现。前端性能测试体系构建…...

编程日记 2025/7/15 19:06:14

nbufxz动态规划1

草药题 dp[i][j]，考虑i个草药，j个时间，能获得的最大价值。这i个草药中，你不一定全部都采集了。你可能有的采了，有的没采。然后你最终得到了一个最优的结果。状态转移方程无非就是： dp[i][j] max(dp[i …...

编程日记 2025/7/15 19:48:37

PostgreSQL 初体验

目录一、PostgreSQL 1. 简介 2. 特点 （1） 开源免费（Open Source） （2）标准兼容（SQL Compliance） （3） 丰富的数据类型（Data Types&#xff09…...

编程日记 2025/7/11 10:38:38

北斗导航｜基于matlab的多波束技术的卫星通信系统性能仿真

基于多波束技术的低轨（LEO）卫星通信系统 **1. 仿真场景建模**1.1 LEO卫星轨道参数设置1.2 地面终端分布**2. 多波束天线模型**2.1 波束方向图生成2.2 频率复用方案**3. 链路预算与干扰分析**3.1 自由空间路径损耗3.2 信噪比（SNR）计算**4. 动态资源调度算法**4.1 基于流量需…...

编程日记 2025/6/28 22:00:21

数据结构与算法学习笔记(Acwing 提高课)----动态规划·状态机模型

数据结构与算法学习笔记----动态规划状态机模型 author: 明月清了个风 first publish time: 2025.5.20 ps⭐️背包终于结束了，状态机模型题目不多。状态机其实是一种另类的状态表示方法，将某一个点扩展为一个状态进行保存并在多个状态之间转移&#xf…...

编程日记 2025/7/10 1:18:57

Vue 3.0 中 Teleport 详解

Teleport 是 Vue 3.0 引入的一个非常有用的特性，它允许你将组件的一部分模板"传送"到 DOM 中的其他位置，而不改变组件的逻辑层次结构。 1. 基本概念 Teleport 的主要用途是将某些 DOM 元素渲染到 Vue 应用之外的 DOM 节点中，这在…...

编程日记 2025/7/9 1:05:15

Linux在防火墙中添加开放端口

例如：安装docker时启动报错： Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details. 此时开放对应端口号就可以咯在防…...

编程日记 2025/6/28 22:00:25

day24：零基础学嵌入式之系统编程

一、系统编程包含文件的读写、和常用操作，操作系统已经进入多任务时代，在同一时刻同时运行多个程序。二、标准io；stdio.h（以计算机为中心） 1.头文件路径：/usr/include/stdio.h so动态库：st…...

编程日记 2025/7/15 7:01:13

2.10 财务分析

10.1 财务报告构成及列报基本要求 10.1.1 财务报告 1.财务报告的构成资产负债表、利润表、现金流量表、所有者权益变动表和附注小型企业可不编现金流量表。 2.财务报表及其作用 1.资产负债表的内容及其作用内容资产类、流动性大小顺序排序。流动资产、非流动资产负债和…...

编程日记 2025/7/11 8:05:55

docker容器知识

一、docker与docker compose区别： 1、docker是创建和管理单个容器的工具，适合简单的应用或服务； 2、docker compose是管理多容器应用的工具，适合复杂的、多服务的应用程序； 3、docker与docker compose对比&#xff…...

编程日记 2025/7/14 17:25:13

国标GB28181视频EasyGBS视频监控平台搭建城市交通道路可视化管理/道路视频巡检/应急监控指挥

一、方案背景随着城市人口与车辆激增，交通管理面临严峻挑战：高峰期道路拥堵、事故处理滞后、违法取证低效，传统管理模式难以为继。智慧交通依托信息技术，成为破局关键，其中视频监控是实现精细化管理的核心。国标GB…...

编程日记 2025/7/10 15:26:23

【LeetCode 热题 100】有效的括号 / 最小栈 / 字符串解码 / 柱状图中最大的矩形

⭐️个人主页：小羊 ⭐️所属专栏：LeetCode 热题 100 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录栈有效的括号最小栈字符串解码每日温度柱状图中最大的矩形堆数组中的第K个最大元素栈有效的括号有效的括号 cl…...

编程日记 2025/7/11 1:08:07

Oracle中如何解决BUFFER BUSY WAITS

和BUFFER CACHE相关的常见等待事件还有BUFFER BUSY WAITS。顾名思义，BUFFER BUSY WAITS等待事件指的是多个会话不能共享缓冲区中的数据块而引发的等待事件。发生BUFFER BUSY WAITS事件时，P1值代表数据文件号，P2值代表数据块号，P3…...

编程日记 2025/7/10 1:24:39

LeetCode 93.复原IP地址 LeetCode 78.子集 LeetCode 90.子集II

LeetCode 93.复原IP地址其实思想跟回文字符串那道题是类似的，但难点在于这道题的终止条件和判断是否IP地址进行划分后是否合理？ 思路： 通过一个int类型的全局变量来记载 " . " 的数目 / 记录你当前所获得的小数组的数目&#x…...

编程日记 2025/7/9 5:09:56

Java转Go日记（四十一）：Gorm删除

1.1.1. 删除/软删除警告删除记录时，需要确保其主要字段具有值，GORM将使用主键删除记录，如果主要字段为空，GORM将删除模型的所有记录 // 删除存在的记录db.Delete(&email)DELETE from emails where id10;// 为Delete语句添加…...

编程日记 2025/7/15 1:30:52

Java基于SpringBoot的公交智能化系统，附源码+文档说明

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/7/9 22:56:16

电子电器架构 --- 汽车高性能计算

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...

编程日记 2025/7/15 17:06:27

Journal of Real-Time Image Processing 投稿过程

投稿要求双栏12页以内(包括参考文献)，这个排版要求感觉不是很严格，我当时就是用普通的双栏的格式去拍的版，然后就提交了，也没单独去下载模版。投稿过程 12.12 Submission received 12.12 Submission is under technical check 1…...

编程日记 2025/7/11 1:03:29

利用basee64特性 -- BYUCTF 2025 JWTF

题目信息: Unfortunately one of our JWTs was compromised by attackers, so we created a JWT Revocation List to ensure they can’t use it anymore. 代码量很少 # 导入必要的模块 # 从 flask 模块导入 Flask, request, redirect, make_response, jsonify 类和函数 from f…...

编程日记 2025/7/15 9:08:45

湖北理元理律师事务所：科学债务规划如何平衡还款与生活

在债务压力普遍加剧的背景下，如何通过专业规划实现“还款不停生活”，成为许多债务人关注的核心问题。湖北理元理律师事务所基于多年实务经验，总结出一套兼顾法律合规性与人性化需求的债务管理方案，其核心逻辑在于通过法律工具优化…...

编程日记 2025/7/11 4:56:15

1.1HarmonyOS NEXT技术架构深度解析：微内核架构与系统分层

HarmonyOS NEXT技术架构深度解析：微内核架构与系统分层摘要作为面向万物互联时代的全场景操作系统，HarmonyOS NEXT通过革命性的星核架构（Star Kernel）重构了系统底层架构。本文将深入解析HarmonyOS NEXT的微内核设计原理、系统…...

编程日记 2025/7/6 13:01:21

考研系列-408真题计算机组成原理篇（2015-2019）

写在前面此文章是本人在备考过程中408真题计算机组成原理部分（2015年-2019年）的易错题及相应的知识点整理，后期复习也常常用到，对于知识提炼归纳理解起到了很大的作用，分享出来希望帮助到大家~ # 2015年 1.IO端口接口电路中可以被CPU直接访问的寄存器 IO控制方式-中断…...

编程日记 2025/7/11 14:12:03

HarmonyOS Next 关键资产的解释

关键资产的安全存储与管理：HarmonyOS Asset Store Kit 深度解析一、关键资产的定义与重要性关键资产（Critical Asset）是指应用运行过程中涉及的短敏感数据，包括但不限于用户密码、身份令牌（Token）、银行…...

编程日记 2025/7/10 12:28:21

Awesome ChatGPT Prompts：释放AI对话潜力的开源利器

项目概览 Awesome ChatGPT Prompts 是由土耳其开发者 Fatih Kadir Akın 发起的开源项目，托管于 GitHub，旨在通过精心设计的提示词模板（Prompts）优化用户与 ChatGPT 的交互体验。项目以 Markdown 和 CSV 格式管理模板，无需复杂编程语言，但需文本处理能力，目前已在 GitH…...

编程日记 2025/7/12 7:23:44

第6章 C控制语句：循环

目录 6.1 再探while 循环6.2 while语句6.3 比较大小：使用关系运算符和表达式6.4 不确定的循环与计数循环6.5 for循环6.6 更多赋值运算符：、-、*、/和%6.7 逗号运算符6.8 退出条件循环：do while6.9 选择哪种循环6.10 嵌套循环6.11 数组6.12 使…...

编程日记 2025/7/7 15:34:20

海盗王客户端更换横版任务面板的实现

海盗王的任务面板，采用的是竖长设计，上半部分显示任务列表，下半部分显示任务详情。这样的设计会带来一个问题：就是任务多的时候，不能完整显示，只能显示前面几个，后面的会隐藏到滚动条里面&…...

编程日记 2025/7/12 6:47:12

【git】在Windows上搭建git服务器

1、简述常用的搭建git服务器的工具有：Gogs、Gitblit、Gitea、GitLab 它们的区别如下： 功能GogsGitblitGiteaGitLab界面语言中文、英文等多语言英文为主中文、英文等多语言英文为主权限管理基础分支权限详细分支权限基础详细分支权限非常完善代码审查…...

编程日记 2025/7/11 19:30:52

leetcode hot100刷题日记——6.和为 K 的子数组

解答：前缀和思想，见灵茶山艾府大大题解。 （1）前缀和思想： 前缀和数组prefix_sum的定义是prefix_sum[i] nums[0] nums[1] … nums[i]。如果存在两个前缀和prefix_sum[j]和prefix_sum[i]满足prefix_sum[i] - prefi…...

编程日记 2025/7/11 1:14:07

人工智能的“歧视”：“她数据”在算法运行中隐形

纵观人类的发展史，每一次科技进步都将对性别平等产生深刻影响。尤其是当下，人们对于借助人工智能技术快速发展来弥合性别不平等寄予厚望。但很多人没想过，人工智能技术本身是客观中立、不存在“算法歧视”“性别偏见的吗？ 弗吉…...

编程日记 2025/7/11 4:55:50

Java数组列表 - ArrayList

在Java中，ArrayList是一种非常实用的数据结构，它允许开发者动态地管理数组大小。通过ArrayList，可以轻松地添加、删除和修改元素，以及获取元素和列表的大小。例如，创建一个ArrayList来存储字符串，然后通过a…...

编程日记 2025/7/11 16:28:54

跨境外贸电商供应链一体化ERP管理系统

项目介绍: 跨境外贸电商供应链一体化ERP管理系统高清视频演示: 跨境外贸电商供应链一体化ERP管理系统_哔哩哔哩_bilibili 系统说明: 外贸电商产品ERP系统包含多个角色（客户、客服、工厂、供应商）和多个功能模块，以下是系统功能的详细说明…...

编程日记 2025/7/10 19:43:45

数据库表连接结构详解

数据库表连接结构详解介绍本文基于提供的SQL表结构，解释了表之间的连接关系。这些表主要涉及AI系统配置，如客户端、顾问和智能体等。通过外键（如client_id、agent_id），这些表形成关联网络。表连接概述以下是主…...

编程日记 2025/7/11 14:51:26

Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

文章目录 4、watch监视4.1 前言4.2 情况一4.3 情况二 4、watch监视 4.1 前言作用：监视数据的变化（和vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。reactive定义的数据。函数返回…...

编程日记 2025/7/10 20:51:17

【Java的批量操作】

系列文章目录 Java知识点文章目录系列文章目录👉前言👉一、常见批量操作方法👉1-1、JDBC 批量操作（数据库）👉1-2、MyBatis 批量操作👉1-3、Java 8 Stream 批量处理集合👉1-4、多线…...

编程日记 2025/7/10 8:30:05

流复备机断档处理

文章目录环境症状问题原因解决方案环境系统平台：UOS（海光）,UOS （飞腾）,UOS（鲲鹏）,UOS（龙芯）,UOS （申威）,银河麒麟svs（X86_64&…...

编程日记 2025/6/28 22:00:33

PostgreSQL架构

目录一、PostgreSQL核心特性与优势 1.PostgreSQL简介 2.PostgreSQL的核心特点 （1）开源与自由 （2）高度符合SQL标准 （3）丰富的数据类型 （4）事务与并发控制 （5&…...

编程日记 2025/7/15 18:50:58

苍穹外卖系统结构与功能报告

一、系统简介苍穹外卖系统是为餐饮企业定制的数字化解决方案，包含管理端后台和用户端小程序两部分。管理端面向餐饮企业员工，支持菜品、套餐、订单等核心业务的数字化管理；用户端面向消费者，提供在线点餐、支付、订单跟踪等功能…...

编程日记 2025/7/10 12:28:30