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

HTML飞舞的爱心

news 来源：原创 2025/7/18 13:55:47

目录

系列文章

写在前面

完整代码

代码分析

写在后面

系列文章

序号目录
1HTML满屏跳动的爱心（可写字）
2HTML五彩缤纷的爱心
3HTML满屏漂浮爱心
4HTML情人节快乐
5HTML蓝色爱心射线
6HTML跳动的爱心（简易版）
7HTML粒子爱心
8HTML蓝色动态爱心
9HTML跳动的爱心（双心版）
10HTML橙色动态粒子爱心
11HTML旋转爱心
12HTML爱情树
13HTML3D相册
14HTML旋转相册
15HTML基础烟花秀
16HTML炫酷烟花秀
17HTML粉色烟花秀
18HTML新春烟花
19HTML龙年大吉
20HTML圣诞树
21HTML大雪纷飞
22HTML想见你
23HTML元素周期表
24HTML飞舞的花瓣
25HTML星空特效
26HTML黑客帝国字母雨
27HTML哆啦A梦
28HTML流星雨
29HTML沙漏爱心
30HTML爱心字母雨
31HTML爱心流星雨
32HTML生日蛋糕
33HTML3D旋转相册
34HTML流光爱心
35HTML满屏飘字
36HTML飞舞爱心

写在前面

HTML语言实现飞舞的爱心完整代码。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>飞舞爱心</title><style>* {margin: 0;padding: 0;}html,body {overflow: hidden;}body {position: relative;background: #000;}</style></head><body><!-- partial:index.partial.html --><!-- partial --><script>class Tool {// random number.static randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}// random color rgb.static randomColorRGB() {return ("rgb(" +this.randomNumber(0, 255) +", " +this.randomNumber(0, 255) +", " +this.randomNumber(0, 255) +")");}// random color hsl.static randomColorHSL(hue, saturation, lightness) {return ("hsl(" +hue +", " +saturation +"%, " +lightness +"%)");}// gradient color.static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {const col = cr + "," + cg + "," + cb;const g = ctx.createRadialGradient(x, y, 0, x, y, r);g.addColorStop(0, "rgba(" + col + ", " + (ca * 1) + ")");g.addColorStop(0.5, "rgba(" + col + ", " + (ca * 0.5) + ")");g.addColorStop(1, "rgba(" + col + ", " + (ca * 0) + ")");return g;}}/*When want to use Angle and radian.*/class Angle {constructor(a) {this.a = a;this.rad = (this.a * Math.PI) / 180;}incDec(num) {this.a += num;this.rad = (this.a * Math.PI) / 180;}}/*variable for canvas.*/let canvas;let offCanvas;class Canvas {constructor(bool) {// create canvas.this.canvas = document.createElement("canvas");// if on screen.if (bool === true) {this.canvas.style.position = 'relative';this.canvas.style.display = 'block';this.canvas.style.top = 0;this.canvas.style.left = 0;document.getElementsByTagName("body")[0].appendChild(this.canvas);}this.ctx = this.canvas.getContext("2d");this.width = this.canvas.width = window.innerWidth;this.height = this.canvas.height = window.innerHeight;// size.this.width < 768 ? this.heartSize = 180 : this.heartSize = 250;// mouse infomation.this.mouseX = null;this.mouseY = null;// sprite array and quantity.this.hearts = [];this.offHeartNum = 1;this.offHearts = [];// offscreen data.this.data = null;}onInit() {let index = 0;for (let i = 0; i < this.height; i += 12) {for (let j = 0; j < this.width; j += 12) {let oI = (j + i * this.width) * 4 + 3;if (this.data[oI] > 0) {index++;const h = new Heart(canvas.ctx, j + Tool.randomNumber(-3, 3), i + Tool.randomNumber(-3, 3), Tool.randomNumber(6, 12), index);canvas.hearts.push(h);}}}}offInit() {for (let i = 0; i < this.offHeartNum; i++) {const s = new Heart(this.ctx, this.width / 2, this.height / 2.3, this.heartSize);this.offHearts.push(s);}for (let i = 0; i < this.offHearts.length; i++) {this.offHearts[i].offRender(i);}// datathis.data = this.ctx.getImageData(0, 0, this.width, this.height).data;// on screen init.this.onInit();}render() {this.ctx.clearRect(0, 0, this.width, this.height);for (let i = 0; i < this.hearts.length; i++) {this.hearts[i].render(i);}}resize() {this.offHearts = [];this.hearts = [];this.width = this.canvas.width = window.innerWidth;this.height = this.canvas.height = window.innerHeight;this.width < 768 ? this.heartSize = 180 : this.heartSize = 250;}}class Heart {constructor(ctx, x, y, r, i) {this.ctx = ctx;this.init(x, y, r, i);}init(x, y, r, i) {this.x = x;this.xi = x;this.y = y;this.yi = y;this.r = r;this.i = i * 0.5 + 200;this.l = this.i;this.c = `hsl(330, ${Tool.randomNumber(90, 100)}%, ${Tool.randomNumber(65, 75)}%)`;this.a = new Angle(Tool.randomNumber(0, 360));this.v = {x: Math.random(),y: -Math.random()};this.ga = Math.random();}draw() {const ctx = this.ctx;ctx.save();ctx.globalCompositeOperation = 'lighter';ctx.globalAlpha = this.ga;ctx.beginPath();ctx.fillStyle = this.c;ctx.moveTo(this.x, this.y + this.r);ctx.bezierCurveTo(this.x - this.r - this.r / 5,this.y + this.r / 1.5,this.x - this.r,this.y - this.r,this.x,this.y - this.r / 5);ctx.bezierCurveTo(this.x + this.r,this.y - this.r,this.x + this.r + this.r / 5,this.y + this.r / 1.5,this.x,this.y + this.r);ctx.closePath();ctx.fill();ctx.restore();}updateParams() {this.a.incDec(1);Math.sin(this.a.rad) < 0 ? this.r = -Math.sin(this.a.rad) * 20 : this.r = Math.sin(this.a.rad) * 20;}updatePosition() {this.l -= 1;if (this.l < 0) {this.v.y -= 0.01;this.v.x += 0.02;this.y += this.v.y;this.x += this.v.x;}}wrapPosition() {if (this.x > canvas.width * 1.5) {this.init(this.xi, this.yi, Tool.randomNumber(6, 12), this.i);}}render() {this.wrapPosition();this.updateParams();this.updatePosition();this.draw();}offRender(i) {this.draw();}}(function () {"use strict";window.addEventListener("load", function () {offCanvas = new Canvas(false);canvas = new Canvas(true);offCanvas.offInit();function render() {window.requestAnimationFrame(function () {canvas.render();render();});}render();// eventwindow.addEventListener("resize", function () {canvas.resize();offCanvas.resize();offCanvas.offInit();}, false);});})();</script></body></html>

代码分析

这段代码通过 HTML、CSS 和 JavaScript 实现了一个飞舞爱心的动画效果。以下将从代码的结构、功能、逻辑和技术实现等多个方面进行详细分析。

一、代码结构和总体概述

  1. HTML 部分

    • 定义了基础的 HTML 结构，设置了 <!DOCTYPE html> 声明，语言为 en，并通过 <head> 部分导入 CSS 样式。

    • <body> 标签内主要包含 JavaScript 脚本，未添加其他内容。这表明所有的视觉元素均通过 Canvas 动态绘制，无静态 HTML 内容。

  2. CSS 部分

    • 全局样式重置：通过 * 选择器清除了所有元素的默认边距和内边距。

    • HTML 和 body 的 overflow 设置为 hidden，使页面无法滚动，确保动画完整显示。

    • 背景颜色设置为黑色，强调彩色爱心的视觉效果。

  3. JavaScript 部分

    • 主要逻辑由多个类和立即执行函数 (function(){...})() 构成。

    • Tool 类提供了一些工具方法，包括随机数生成和颜色生成等。

    • Angle 类用于处理角度和弧度转换。

    • Canvas 类负责管理画布的初始化、元素渲染和窗口缩放适配。

    • Heart 类定义了爱心的属性、绘制方法和动态行为。

二、功能分析

  1. 随机颜色生成

    • Tool 类定义了 randomColorRGB 和 randomColorHSL 方法，用于生成随机 RGB 和 HSL 颜色。gradientColor 方法进一步提供了径向渐变色的生成。

  2. 角度管理

    • Angle 类封装了角度与弧度的关系，并提供了角度递增和递减的功能。这在爱心的动态变化中起到了关键作用。

  3. 画布初始化

    • Canvas 类用于创建画布并根据屏幕大小动态调整尺寸。通过 this.width 和 this.height 确定画布的宽高，同时记录鼠标位置。

  4. 爱心绘制

    • Heart 类实现了爱心的绘制逻辑，基于贝塞尔曲线绘制对称的心形图案。

    • 每个爱心的颜色、透明度和大小都由随机数控制，呈现多样化的视觉效果。

  5. 动态行为

    • 爱心会在屏幕中飞舞，逐渐远离原始位置。

    • 通过调整 this.v（速度）和 this.a（角度）实现运动轨迹的动态变化。

  6. 窗口适配

    • 当窗口大小改变时，重新初始化画布和爱心，确保动画效果适配新尺寸。

三、核心技术实现

  1. Canvas 元素的动态创建

    • JavaScript 通过 document.createElement("canvas") 动态创建画布，并将其添加到页面中。

    • 通过 getContext("2d") 获取画布上下文，执行绘图操作。

  2. 贝塞尔曲线绘制心形

    • Heart 类中使用 bezierCurveTo 方法绘制了左右对称的心形曲线。

    • 具体实现中，两个贝塞尔曲线控制点的位置决定了心形的对称性和弧度。

  3. 颜色渐变和透明度变化

    • 爱心的颜色使用 HSL 色值，动态生成亮度和饱和度。通过全局透明度 globalAlpha 实现爱心的透明效果。

  4. 动画实现

    • 动画基于 window.requestAnimationFrame 方法实现，该方法比 setInterval 更高效，适配屏幕刷新率。

    • 动画帧中调用 canvas.render() 方法，逐帧绘制爱心的位置、大小和透明度变化。

  5. 多画布联动

    • 使用了两个画布：一个离屏画布（offCanvas）用于生成基础数据；另一个在屏幕上展示爱心动画。

四、详细逻辑分析

  1. 工具类（Tool）

    • 提供了生成随机数和颜色的工具方法：

      • randomNumber(min, max)：生成 min 到 max 之间的随机整数。

      • randomColorRGB 和 randomColorHSL：分别生成 RGB 和 HSL 随机颜色，用于动态变化。

  2. 画布类（Canvas）

    • 初始化

      • 创建画布，设置宽高。

      • 根据屏幕宽度调整爱心尺寸，确保在不同设备上都有合适的显示比例。

    • 离屏画布（offCanvas）

      • 离屏画布用于生成爱心的初始位置数据，避免直接在主画布上操作，提高性能。

    • 渲染

      • 主循环调用 render 方法绘制每一帧。

      • 通过遍历 this.hearts 数组，逐个绘制爱心。

  3. 爱心类（Heart）

    • 绘制逻辑

      • 使用贝塞尔曲线描绘心形，基于动态参数更新形状和大小。

      • 设置全局透明度和颜色，增加视觉层次感。

    • 运动逻辑

      • 爱心的初始位置为随机生成，运动方向和速度通过 v.x 和 v.y 控制。

      • 超出屏幕后重新初始化位置和属性，实现循环效果。

  4. 动态交互

    • 页面监听 resize 事件，当窗口大小改变时，重新初始化画布和离屏画布数据，确保动画效果保持一致。

五、总结

这段代码通过 JavaScript 精心设计了一个动态飞舞的爱心效果，充分展示了 Canvas 的强大能力。整体结构清晰，功能丰富，逻辑合理，是一个兼具美观与性能的动画实现方案。这种实现方式不仅可以用于网页装饰，还可以扩展为互动游戏或者其他创意场景的基础模块。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

相关文章：

HTML飞舞的爱心

目录 系列文章 写在前面 完整代码 代码分析 写在后面 系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色…...

编程日记 2025/7/18 13:55:47

银行卡 OCR 识别 API 接口的发展前景

随着智能手机的广泛普及以及互联网的迅猛发展&#xff0c;“互联网 ” 时代的移动支付已然开启了智慧生活的崭新蓝图。移动支付要求进行实名认证并绑定银行卡&#xff0c;然而传统的手工输入银行卡号不但速度缓慢、容易出错&#xff0c;还极大地降低了用户体验。银行卡 OCR 识别…...

编程日记 2025/7/18 13:50:29

python tkinter 控件实现鼠标悬停提示，提示文本动态展示

展示效果 全部代码和使用示例 # _*_ coding:utf-8 _*_ import tkinter as tk import pyautoguiscreen_width, screen_height pyautogui.size()class WidgetTip:"""鼠标悬停提示"""def __init__(self, widget, text):self.widget widgetself.…...

编程日记 2025/7/18 13:47:03

【spark-spring boot】学习笔记

目录 说明RDD学习RDD介绍RDD案例基于集合创建RDDRDD存入外部文件中 转换算子 操作map 操作说明案例 flatMap操作说明案例 filter 操作说明案例 groupBy 操作说明案例 distinct 操作说明案例 sortBy 操作说明案例 mapToPair 操作说明案例 mapValues操作说明案例 groupByKey操作说…...

编程日记 2025/7/18 13:54:28

Delphi ADO组件中的 ADOTable、ADOQurey 无SQL语句实现增、删、改、查

准备&#xff1a; 数据库是Acess数据库 1.放一个 Adoconnection1到 表单上,设置好数据连接字符串 并 设置 connected 属性 为 true 2 设置 adoquery1的connection 属性为 adoconnection1 3 设置 adoquery1的 sql 属性为 select * from 表名 4 设置 adoquery1的 active true …...

编程日记 2025/7/18 13:55:47

力扣整理版九：贪心算法

局部最优 全局最优 局部最优可以推出全局最优 并且想不出反例 ----------------------------- (1) 455 分发饼干 (2) 1005 k次取反后最大化的数组和 (3) 860 柠檬水找零 (4) 376 摆动序列 (5) 738 单调递增的数字 (6) 122 买卖股票的最佳时机2 (7) 135 分发糖果 (8…...

编程日记 2025/7/17 13:37:04

ffmpeg 视频滤镜：高斯模糊-gblur

滤镜描述 gblur 官网地址 > FFmpeg Filters Documentation 这个滤镜会将视频变得模糊。 滤镜使用 参数 gblur AVOptions:sigma <float> ..FV.....T. set sigma (from 0 to 1024) (default 0.5)steps <int> ..FV.....T…...

编程日记 2025/7/18 13:51:37

利用D3.js实现数据可视化的简单示例

目录 一、D3.js选择器 二、数据绑定相关方法 三、DOM操作方法 四、事件监听 五、实现折线图案例 1.首先引入 D3.js 库。 2.然后获取数据&#xff08;这里定义了销售数据数组作为数据&#xff09;。 3.接着创建一个 svg 元素作为画布 4.定义 x 轴和 y 轴的比例尺&#…...

编程日记 2025/7/18 13:48:25

Top 10 Tools to Level Up Your Prompt Engineering Skills

此文章文字是转载翻译&#xff0c;图片是自已用AI 重新生成的。文字内容来自 https://www.aifire.co/p/top-10-ai-prompt-engineering-tools 供记录学习使用。 Introduction to AI Prompt Engineering AI Prompt Engineering 简介 1&#xff0c;Prompt Engineering 提示工程…...

编程日记 2025/7/18 1:07:05

sed awk 第二版学习（十一）—— 交互式拼写检查器 spellcheck.awk

目录 1. 脚本代码 2. 执行情况 3. 代码详解 &#xff08;1&#xff09;BEGIN 过程 &#xff08;2&#xff09;主过程 &#xff08;3&#xff09;END 过程 &#xff08;4&#xff09;支持函数 4. 附加说明 这是一个基于 UNIX spell 程序的名为 spellcheck 的 awk 脚本&a…...

编程日记 2025/7/18 13:46:09

Android 应用测试的各种环境问题记录（Instrumentation测试）

报错记录 failed to configure packages targetSdkVersion&#xff08;未解决&#xff09; failed to configure com.demo.test.SettingsActivityTest.testOnCreate_withNullSavedInstanceState: Package targetSdkVersion34 > maxSdkVersion32 java.lang.IllegalArgumentE…...

编程日记 2025/7/15 15:57:04

python爬虫案例——猫眼电影数据抓取之字体解密，多套字体文件解密方法（20）

文章目录 1、任务目标2、网站分析3、代码编写1、任务目标 目标网站：猫眼电影（https://www.maoyan.com/films?showType=2） 要求：抓取该网站下，所有即将上映电影的预约人数，保证能够获取到实时更新的内容；如下： 2、网站分析 进入目标网站，打开开发者模式，经过分析，我…...

编程日记 2025/7/18 13:49:10

问题记录-Java后端

问题记录 目录 问题记录1.多数据源使用事务注意事项&#xff1f;2.mybatis执行MySQL的存储过程&#xff1f;3.springBoot加载不到nacos配置中心的配置问题4.服务器产生大量close_wait情况 1.多数据源使用事务注意事项&#xff1f; 问题&#xff1a;在springBoot项目中多表处理数…...

编程日记 2025/7/18 13:44:32

YB2503HV：高效率降压IC，助力电动车、太阳能设备等领域的能源转换

今天我要向大家介绍一款引人注目的产品—— YB2503HV 100V 3A SOP8内置MOS 高效率降压IC。这款单片集成芯片具备可设定输出电流的开关型降压恒压驱动器功能&#xff0c;可广泛应用于电动车、太阳能设备、电子电池充电等领域。让我们一起来看看它的特点和应用吧&#xff01; 首先…...

编程日记 2025/7/18 7:12:39

Day47 | 动态规划 ：线性DP 最长公共子序列最长公共子数组

Day47 | 动态规划 &#xff1a;线性DP 最长公共子序列&&最长公共子数组 动态规划应该如何学习&#xff1f;-CSDN博客 本次题解参考自灵神的做法&#xff0c;大家也多多支持灵神的题解 最长公共子序列 编辑距离_哔哩哔哩_bilibili 动态规划学习&#xff1a; 1.思考…...

编程日记 2025/7/17 20:57:50

【山大909算法题】2014-T1

文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse&#xff0c;该函数对链表进行逆序操作&#xff08;将链表中的结点按与原序相反的顺序连接&#xff09;&#xff0c;要求逆序操作就地进行&#xff0c;不分配…...

编程日记 2025/7/17 17:52:57

《生成式 AI》课程 作业6 大语言模型（LLM）的训练微调 Fine Tuning -- part2

资料来自李宏毅老师《生成式 AI》课程&#xff0c;如有侵权请通知下线 Introduction to Generative AI 2024 Spring 来源背景说明 该文档主要介绍了国立台湾大学&#xff08;NTU&#xff09;2024 年春季 “生成式人工智能&#xff08;GenAI&#xff09;” 课程的作业 5&#…...

编程日记 2025/7/18 13:47:03

【机器学习】如何使用Python的Scikit-learn库实现机器学习模型，并对数据进行预处理和特征缩放以提高模型性能？

使用Python的Scikit-learn库可以方便地实现机器学习模型&#xff0c;并对数据进行预处理和特征缩放以提高模型性能。以下是一个典型的工作流程&#xff0c;包括数据加载、预处理、特征缩放、模型训练和评估&#xff1a; 1. 安装Scikit-learn 确保已安装Scikit-learn库&#x…...

编程日记 2025/7/17 13:57:31

【SpringCloud详细教程】-04-服务容错--Sentinel

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…...

编程日记 2025/7/18 13:45:26

计算机学习

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…...

编程日记 2025/7/2 3:46:33

CSS - CSS One-Line

1. aspect-ratio 描述: 用于定义元素的宽高比&#xff0c;简化了以往使用“填充黑客”的方法。只需指定一个比率&#xff0c;浏览器会自动调整元素的尺寸 案例: .aspect-ratio-hd {aspect-ratio: 16/9; } .aspect-ratio-square {aspect-ratio: 1; /* 正方形 */ }2. object-…...

编程日记 2025/7/18 13:52:33

【AIGC】如何准确引导ChatGPT，实现精细化GPTs指令生成

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | 提示词Prompt应用实例 文章目录 &#x1f4af;前言&#x1f4af;准确引导ChatGPT创建爆款小红书文案GPTs指令案例&#x1f4af; 高效开发GPTs应用的核心原则明确应用场景和目标受众构建多样化风格模板提问与引…...

编程日记 2025/7/14 15:24:53

Redis主从架构

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的键值对存储系统&#xff0c;广泛应用于缓存、消息队列、实时分析等场景。为了提高系统的可用性、可靠性和读写性能&#xff0c;Redis提供了主从复制&#xff08;Master-Slave Replication&#xf…...

编程日记 2025/7/18 13:48:23

无人机探测：光电侦测核心技术算法详解！

核心技术 双光谱探测跟踪&#xff1a; 可见光成像技术&#xff1a;利用无人机表面反射的自然光或主动光源照射下的反射光&#xff0c;通过高灵敏度相机捕捉图像。该技术适用于日间晴朗天气下的无人机探测&#xff0c;具有直观、易于识别目标的特点。 红外成像技术&#xff1…...

编程日记 2025/7/18 13:51:37

34 基于单片机的指纹打卡系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52RC&#xff0c;采用两个按键替代指纹&#xff0c;一个按键按下&#xff0c;LCD12864显示比对成功&#xff0c;则 采用ULN2003驱动步进电机转动&#xff0c;表示开门&#xff0c;另一个…...

编程日记 2025/7/8 13:23:23

Day 26

进入贪心算法 基础理论 1、什么是贪心&#xff1f; 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 Eg&#xff1a;一堆钞票&#xff0c;你可以拿走 10 张&#xff0c;想达到最大金额&#xff0c;要怎么拿&#xff1f; –》指定每一次拿最大的&#xff0…...

编程日记 2025/7/13 19:12:18

11.25c++继承、多态

练习&#xff1a; 编写一个 武器类 class Weapon{int atk; }编写3个武器派生类&#xff1a;短剑&#xff0c;斧头&#xff0c;长剑 class knife{int spd; }class axe{int hp; }class sword{int def; }编写一个英雄类 class Hero{int atk;int def;int spd;int hp; public:所有的…...

编程日记 2025/7/18 1:11:41

ThinkPad t61p 作SMB服务器，打印服务器，pc ,android ,ipad利用此服务器互传文件

1.在t61p上安装win7 2,配置好smb 服务 3.再安装好打印驱动程序 4.pc与win7利用系统的网络互相发现,映射为硬盘使用。 5.android&#xff0c;ipad安装ES文件浏览器访问win7 共享文件夹&#xff0c;互传文件。 6.android手机安装FE文件浏览器&#xff0c;可以利用花生壳外网…...

编程日记 2025/7/14 21:24:43

数据结构单链表，顺序表，广义表，多重链表，堆栈的学习

单链表 比如一个多项式&#xff0c;主要包括x的系数&#xff0c;x的指数&#xff0c;那么可以创建一个一维数组来存储它的系数和指数&#xff0c;用数组下标来表示。它的系数可以用数组下标对应的数组元素来储存。 可是这样储存会浪费空间所以采用单链表形式来存储。 即创建一…...

编程日记 2025/7/18 13:53:28

uniapp内嵌的webview H5与应用通信

H5端&#xff1a; 1、找到index.html引入依赖 <script type"text/javascript" src"https://unpkg.com/dcloudio/uni-webview-js0.0.3/index.js"></script> 2、在需要通讯处发送消息 uni.postMessage({data:{code:200,msg:"处理完成&q…...

编程日记 2025/7/18 4:48:17

黄仁勋：人形机器人在内，仅有三种机器人有望实现大规模生产

11月23日&#xff0c;芯片巨头、AI时代“卖铲人”和最大受益者、全球市值最高【英伟达】创始人兼CEO黄仁勋在香港科技大学被授予工程学荣誉博士学位&#xff1b;并与香港科技大学校董会主席沈向洋展开深刻对话&#xff0c;涉及人工智能&#xff08;AI&#xff09;、计算力、领导…...

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

Docker--harbor私有仓库部署与管理

目录 一、Harbor 简介 1.1 什么是Harbor 1.2 Harbor的特性 1.3 Harbor的构成 二、Harbor 部署 2.1 部署 Docker-Compose 服务 2.2 部署 Harbor 服务 &#xff08;1&#xff09;下载或上传 Harbor 安装程序 &#xff08;2&#xff09;修改harbor安装的配置文件 2.3 启…...

编程日记 2025/7/15 1:21:41

35 基于单片机的精确电压表DA-AD转换

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DAC0832和ADC0832检测电压&#xff0c;0到8.5V&#xff0c;设计复位电路 LED管显示实际稳压值&#xff0c;初始电压0 二、硬件资源 基于KEIL5编写C代码&#xff0c…...

编程日记 2025/7/2 5:03:56

Windows系统下安装Triton 3.0.0预编译Triton 2.1.0

Triton是一个用于编写高效自定义深度学习原语的语言和编译器。它旨在提供一个开源环境&#xff0c;使得编写代码的速度比CUDA更快&#xff0c;同时比其他现有的DSLs&#xff08;领域特定语言&#xff09;更灵活。 在开始安装之前&#xff0c;请确保您的系统满足以下要求&#x…...

编程日记 2025/7/13 11:36:25

Easyexcel（7-自定义样式）

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09;Easyexcel&#xff08;5-自定义列宽&#xff09;Easyexcel&#xff08;6-单…...

编程日记 2025/7/15 12:53:58

ubuntu搭建k8s环境详细教程

在Ubuntu上搭建Kubernetes&#xff08;K8s&#xff09;环境可以通过多种方式实现&#xff0c;下面是一个详细的教程&#xff0c;使用kubeadm工具来搭建Kubernetes集群。这个教程将涵盖从准备工作到安装和配置Kubernetes的所有步骤。 环境准备 操作系统&#xff1a;确保你使用的…...

编程日记 2025/7/16 1:38:14

spark 写入mysql 中文数据 显示?? 或者 乱码

目录 前言 Spark报错&#xff1a; 解决办法&#xff1a; 总结一下&#xff1a; 报错&#xff1a; 解决&#xff1a; 前言 用spark写入mysql中&#xff0c;查看中文数据 显示?? 或者 乱码 Spark报错&#xff1a; Sat Nov 23 19:15:59 CST 2024 WARN: Establishing SSL…...

编程日记 2025/7/16 1:38:50

Python中的简单爬虫

文章目录 一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务器和浏览器的通讯流程3. 浏览器访问Web服务器的通讯流程4. 加载图片资源代码 二. 基于Web请求的FastAPI通用配置1. 目前Web服务器存在问题2. 基于Web请求的FastAPI通用配置 三. Python爬虫介绍1. 什…...

编程日记 2025/7/9 1:24:41

网络安全原理与技术思考题/简答题

作业1&#xff08;第1章、第2章、第8章&#xff09; 1. 网络安全的基本属性有哪些&#xff1f;简单解释每个基本属性的含义。网络安全的扩展属性包括哪些&#xff1f; 基本属性&#xff1a; 1.机密性(Confidentiality)&#xff1a; 含义&#xff1a;确保信息不被未授权的用户…...

编程日记 2025/7/8 19:18:55

技术周刊 ｜ 前端真的凉了吗？2024 前端趋势解读

大家好&#xff0c;我是童欧巴。见字如面&#xff0c;万事胜意。 小雪已过&#xff0c;大家勿忘添衣御寒&#xff0c;欢迎来到第 135 期周刊。 大厨推荐 2024 前端趋势 The Software House 公司发布的前端状态调查报告&#xff0c;本版是迄今为止最全面的调查&#xff0c;共…...

编程日记 2025/7/15 16:17:31

Qt常用控件之按钮类控件

目录 QPushButton 添加图标 添加快捷键 QRadioButton 关于toggled 模拟点餐功能 QCheckBox 刚刚 QWidget 中涉及到的各种 属性/函数/使用方法&#xff0c;针对接下来要介绍的 Qt 的各种控件都是有效的&#xff0c;因为各种控件都是继承自 QWidget 的 接下来本篇博客就学…...

编程日记 2025/7/17 9:05:03

Wonder3D本地部署到算家云搭建详细教程

Wonder3D简介 Wonder3D仅需2至3分钟即可从单视图图像中重建出高度详细的纹理网格。Wonder3D首先通过跨域扩散模型生成一致的多视图法线图与相应的彩色图像&#xff0c;然后利用一种新颖的法线融合方法实现快速且高质量的重建。 本文详细介绍了在算家云搭建Wonder3D的流程以及…...

编程日记 2025/7/15 1:32:43

景联文科技：高质量数据采集标注服务引领AI革新

在当今这个数字化时代&#xff0c;数据已经成为推动社会进步和产业升级的关键资源。特别是在人工智能领域&#xff0c;高质量的数据是训练出高效、精准的AI模型的基础。景联文科技是一家专业的数据采集与标注公司&#xff0c;致力于为客户提供高质量的数据处理服务&#xff0c;…...

编程日记 2025/7/13 5:31:56

企业面试真题----阿里巴巴

1.HashMap为什么不是线程安全的&#xff1f; 首先hashmap就是为单线程设计的&#xff0c;并不适合于多线程环境&#xff0c;而hashmap的线程不安全原因主主要是以下两个原因&#xff1a; 死循环 死循环问题发生在jdk1.8之前&#xff08;不包含1.8&#xff09;&#xff0c;造…...

编程日记 2025/7/15 23:43:12

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【四】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…...

编程日记 2025/7/14 20:29:16

【C++知识总结2】C++里面的小配角cout和cin

一、引入 第一个关于输入输出的C代码 #include<iostream> // std是C标准库的命名空间名&#xff0c;C将标准库的定义实现都放到这个命名空间中 using namespace std; int main() {cout<<"Hello world!!!"<<endl;return 0; } 1. 使用cout标准输出…...

编程日记 2025/7/16 14:14:56

门控循环单元（GRU）与时间序列预测应用

一、GRU简介 门控循环单元&#xff08;Gated Recurrent Unit&#xff0c;简称GRU&#xff09;是一种简化版的LSTM&#xff08;长短期记忆网络&#xff09;&#xff0c;专门用于解决长序列中的梯度消失问题。与LSTM相比&#xff0c;GRU具有更简单的结构和较少的参数&#xff0c…...

编程日记 2025/7/15 6:45:54

Spring Boot 3 集成 Spring Security（2）授权

文章目录 授权配置 SecurityFilterChain基于注解的授权控制自定义权限决策 在《Spring Boot 3 集成 Spring Security&#xff08;1&#xff09;》中&#xff0c;我们简单实现了 Spring Security 的认证功能&#xff0c;通过实现用户身份验证来确保系统的安全性。Spring Securit…...

编程日记 2025/7/15 3:12:04

互联网摸鱼日报(2024-11-22)

互联网摸鱼日报(2024-11-22) 36氪新闻 学习马斯克不丢人&#xff0c;脸书也开始改造自己了 旅游行业趋势变了&#xff0c;增长还能从哪里寻找&#xff1f; 大厂入局后&#xff0c;小型小游戏团队能否继续喝一口汤&#xff1f; 一拥而上的“跨界咖啡”&#xff0c;是“走心”…...

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

RNN并行化——《Were RNNs All We Needed?》论文解读

InfoPaperhttps://arxiv.org/abs/2410.01201GitHubhttps://github.com/lucidrains/minGRU-pytorch个人博客地址http://myhz0606.com/article/mini_rnn 最近在看并行RNN相关的paper&#xff0c;发现很多都利用了Parallel Scanning算法。本文将从Parallel Scanning算法开始&…...

编程日记 2025/7/14 4:41:37