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

HTML飞舞的爱心

news 文章来源：https://blog.csdn.net/m0_68111267/article/details/144040843 2025/1/10 11:42:22

目录

系列文章

写在前面

完整代码

代码分析

写在后面

系列文章

序号目录
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蓝色…...

编程日记 2024/11/29 18:06:20

C++中智能指针的使用及其原理 -- RAII，内存泄漏，shared_ptr，unique_ptr，weak_ptr

目录 1.智能指针的使用场景分析 2.RAII和智能指针的设计思路 3.C标准库智能指针的使用 4.智能指针的原理以及模拟实现 5.shared_ptr循环引用问题和weak_ptr 5.1shared_ptr循环引用问题 5.2weak_ptr的原理和部分接口 5.3weak_ptr的简单模拟实现 6. shared_ptr的线程安…...

编程日记 2024/11/29 18:04:18

Linux服务器安装mongodb

因为项目需要做评论功能&#xff0c;领导要求使用mongodb&#xff0c;所以趁机多学习一下。 在服务器我们使用docker安装mongodb 1、拉取mongodb镜像 docker pull mongo &#xff08;默认拉取最新的镜像&#xff09; 如果你想指定版本可以这样 docker pull mongo:4.4&#…...

编程日记 2024/11/29 18:03:17

Android11修改摄像头前后置方法，触觉智能RK3568开发板演示

本文介绍在Android11系统下&#xff0c;修改摄像头前后置属性的方法。使用触觉智能EVB3568鸿蒙开发板演示&#xff0c;搭载瑞芯微RK3568&#xff0c;四核A55处理器&#xff0c;主频2.0Ghz&#xff0c;1T算力NPU&#xff1b;支持OpenHarmony5.0及Linux、Android等操作系统&#…...

编程日记 2024/11/29 18:02:16

leetcode 212. 单词搜索 II

给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一…...

编程日记 2024/11/29 18:00:14

Taro 鸿蒙技术内幕系列（三） - 多语言场景下的通用事件系统设计

基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测&#xff0c;本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术内幕 背景 在鸿蒙生态系统中&#xff0c;虽然原生应用通常基于 ArkTS 实现&#xff0c;但在实际研发过程中发现&#xff0c;使用 C…...

编程日记 2024/11/29 17:59:12

《Docker Registry（镜像仓库）详解》

一、引言 在容器化技术日益普及的今天&#xff0c;Docker 已成为众多开发者和企业的首选工具。而 Docker Registry&#xff08;镜像仓库&#xff09;作为 Docker 生态系统中的重要组成部分&#xff0c;负责存储和分发 Docker 镜像。本文将深入探讨 Docker Registry 的概念、功能…...

编程日记 2024/11/29 17:58:10

AI前景分析展望——GPTo1 SoraAI

引言 人工智能&#xff08;AI&#xff09;领域的飞速发展已不仅仅局限于学术研究&#xff0c;它已渗透到各个行业&#xff0c;影响着从生产制造到创意产业的方方面面。在这场技术革新的浪潮中&#xff0c;一些领先的AI模型&#xff0c;像Sora和OpenAI的O1&#xff0c;凭借其强大…...

编程日记 2024/11/29 17:57:08

超级详细讲解转义字符，\? \‘ \f \0 \t等等！！！

C语言有一组特殊的字符称作转义字符&#xff0c;顾名思义&#xff0c;转变原来的意思 1 \? ??)是一个三字母词&#xff0c;在以前的编译器它会被编译为] (??会被编译为[ 因此在以前输入(are you ok ??)就会被编译为are you ok ] 解决这个问题只要在问号前输入\&#xf…...

编程日记 2024/11/29 17:54:05

微信小程序数据请求教程：GET与POST请求详解

微信小程序数据请求教程：GET与POST请求详解 引言 在微信小程序的开发过程中，数据请求是至关重要的一部分。通过与后端服务器进行通信，小程序能够获取动态数据，实现丰富的功能。在这篇文章中，我们将深入探讨微信小程序中的数据请求，重点介绍GET和POST请求的使用方法、示…...

编程日记 2024/11/29 17:53:04

Linux系统管理基础指南--习题

目录 一、基础知识与命令 二、 Linux的用户接口 三、文件权限与目录管理 四、shell相关知识 五、软件安装与网络 六、网络进程管理 一、基础知识与命令 1. (操作题)分别执行下述命令 ls -al cd ~ cd man -f man man –k cd man --help cal --help date --help bc --he…...

编程日记 2024/11/29 17:52:02

JVM（JAVA虚拟机）内存溢出导致内存不足，Java运行时环境无法继续

1、先贴出服务最后打印出来的日志&#xff0c;意思就是给虚拟机分配的内存被用完了&#xff0c;没有可用的内存了&#xff0c;服务运行不了了&#xff0c;被动停服了。详细的日志记录在了/home/user/zx/tomcat/apache-tomcat-8.5.82/bin/hs_err_pid147951.log文件里。 Java Ho…...

编程日记 2024/11/29 17:50:00

IOC控制反转详解

IOC&#xff08;控制反转&#xff09; component的衍生注解 前面曾经提到&#xff0c;若想要把某个对象交给IOC容器管理&#xff0c;就需要在其声明上加上Component注解。但是Spring中有三层架构&#xff0c;为了更加清晰的标注对象是属于哪一层的&#xff0c;提供了三个Comp…...

编程日记 2024/11/29 17:47:58

Qml-TabBar类使用

Qml-TabBar类使用 TabBar的概述 TabBar继承于Container 由TabButton进行填充&#xff0c;可以与提供currentIndex属性的任何容器或布局控件一起使用&#xff0c;如StackLayout 或 SwipeView&#xff1b;contentHeight : real:TabBar的内容高度&#xff0c;用于计算标签栏的隐…...

编程日记 2024/11/29 17:45:56

C# 常量

文章目录 前言一、整数常量&#xff08;一&#xff09;合法与非法实例对比&#xff08;二&#xff09;不同进制及类型示例 二、浮点常量三、字符常量四、字符串常量五、定义常量 前言 在 C# 编程的世界里&#xff0c;常量是一类特殊的数据元素&#xff0c;它们如同程序中的 “定…...

编程日记 2024/11/29 17:44:54

diffusion model： prompt-to-prompt 深度剖析

参考&#xff1a;diffusion model(十四)&#xff1a; prompt-to-prompt 深度剖析-CSDN博客 P2P提出的Motivation 目前大火的文生图技术(text to image)&#xff0c;给定一段文本&#xff08;prompt&#xff09;和随机种子&#xff0c;文生图模型会基于这两者生成一张图片。生…...

编程日记 2024/11/29 17:43:54

uniapp实现APP版本升级

App.vue 直接上代码 <script>export default {methods: {//APP 版本升级Urlupload() {// #ifdef APP-PLUSplus.runtime.getProperty(plus.runtime.appid, (info) > {// 版本号变量持久化存储getApp().globalData.version info.version;this.ToLoadUpdate(info.versi…...

编程日记 2024/11/29 17:42:51

uniapp强制修改radio-group内单选组件的状态方法

在uniapp开发中&#xff0c;需要在radio-group内部切换时做判断&#xff0c;提醒客户是否要变换radio的值&#xff0c;但是大家知道radio是单选组件&#xff0c;往往你点击后&#xff0c;是不能再修改状态的&#xff0c;就算你在点击后做判断&#xff0c;修改current的值&#…...

编程日记 2024/11/29 17:41:50

学习python的第十四天之函数——高阶函数和偏函数

学习python的第十四天之函数——高阶函数和偏函数 高阶函数 高阶函数是指那些可以接受一个或多个函数作为参数&#xff0c;或者返回一个函数作为结果的函数。高阶函数是函数式编程范式中的一个重要概念&#xff0c;它们使得代码更加灵活和模块化。 sorted() sorted()函数用于对…...

编程日记 2024/11/29 17:40:48

数据结构之二叉树详解：从原理到实现

1. 什么是二叉树&#xff1f; 二叉树&#xff08;Binary Tree&#xff09;是一种树形数据结构&#xff0c;其中每个节点最多有两个子节点&#xff0c;分别被称为左子节点和右子节点。二叉树可以用来表示层次关系&#xff0c;如文件目录、组织结构&#xff0c;或用于快速查找、…...

编程日记 2024/11/29 17:38:46

iOS 系统中使用 webView 打印 html 的打印边距问题

需求是使用系统提供的打印功能将HTML代码打印出来 1、使用CSS page 设置边距&#xff08;iOS不生效&#xff09; page {margin: 0;padding: 0;size: A6 portrait; }在 Android 中边距设置生效的&#xff0c;但是在 iOS 系统使用CSS page规则是不生效的 当从 iOS 系统打印网页…...

编程日记 2024/11/29 17:35:42

如何在ubuntu上调试core dump

启用core dump 确认ulimit 状态 ulimit -c 如果输出是0&#xff0c;表示core dump被禁用了 运行 ulimit -c unlimited 再次运行 ulimit -c 确认输出是ulimited 设置core dump路径和文件名格式 下面命令表示设置core dump文件在当前目录&#xff08;%e表示程序名&#x…...

编程日记 2024/11/29 17:31:37

基于 JNI + Rust 实现一种高性能 Excel 导出方案（上篇）

每个不曾起舞的日子&#xff0c;都是对生命的辜负。 ——尼采 一、背景&#xff1a;Web 导出 Excel 的场景 Web 导出 Excel 功能在数据处理、分析和共享方面提供了极大的便利&#xff0c;是许多 Web 应用程序中的重要功能。以下是一些典型的场景&#xff1a; 数据报表导出&am…...

编程日记 2024/11/29 17:29:34

【Maven】依赖管理

4. Maven的依赖管理 在 Java 开发中&#xff0c;项目的依赖管理是一项重要任务。通过合理管理项目的依赖关系&#xff0c;我们可以有效的管理第三方库&#xff0c;模块的引用及版本控制。而 Maven 作为一个强大的构建工具和依赖管理工具&#xff0c;为我们提供了便捷的方式来管…...

编程日记 2024/11/29 17:28:33

springboot/ssm高校超市管理系统Java商品出入库供应商管理系统web源码wms

springboot/ssm高校超市管理系统Java商品出入库供应商管理系统web源码wms 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&a…...

编程日记 2024/11/29 17:25:30

小程序-基于java+SpringBoot+Vue的微信小程序养老院系统设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…...

编程日记 2024/11/29 17:24:28

宠物电商对接美团闪购：实现快速配送与用户增值

随着宠物行业的快速发展&#xff0c;宠物电商市场也在不断扩张。消费者的需求不再局限于传统的线上购物模式&#xff0c;越来越多的人开始追求更快捷的配送服务和更优质的购物体验。为了适应这一趋势&#xff0c;许多宠物电商平台开始寻求与本地配送平台合作&#xff0c;以提供…...

编程日记 2024/11/29 17:23:26

Vue中使用＜Transition＞与＜TransitionGroup＞

目录 介绍 CSS过渡类 为过渡效果命名 CSS的transition CSS的transform 性能考量 出现时过渡 元素间过渡 过渡模式 使用Key属性过渡 和的区别 进入/离开动画 移动动画 一个购物车飞跃例子 介绍 传统HTML中&#xff0c;我们可以使用CSS属性&#xff1a;“animation”…...

编程日记 2024/11/29 17:22:24

Algorithms and Data Structures in C++ by Mohammed Yasir Eramangadan

MP4 创建 |视频&#xff1a;h264、1280720 |音频&#xff1a;AAC&#xff0c;44.1 KHz&#xff0c;2 通道 类型&#xff1a;在线学习 |语言&#xff1a;英文 字幕 |持续时间&#xff1a; 159 讲座 &#xff08; 10h 43m &#xff09; |大小&#xff1a; 3.5 GB “通过专家制作…...

编程日记 2024/11/29 17:20:22

2024广东省职业技能大赛云计算——构建CICD 部署2048小游戏

构建CI/CD 前言 题目如下&#xff1a; 构建CI/CD 编写流水线脚本.gitlab-ci.yml触发自动构建&#xff0c;具体要求如下&#xff1a; &#xff08;1&#xff09;基于镜像maven:3.6-jdk-8构建项目的drone分支&#xff1b; &#xff08;2&#xff09;构建镜像的名称&#xff1a…...

编程日记 2024/11/29 17:19:20

织梦做的网站打包在dw修改/佛山市seo推广联系方式

vue 3.x 马上就要问世了&#xff0c;显然尤大大是不想让我们好好活了&#xff0c;但是转念一想&#xff0c;比你优秀的人都还在努力&#xff0c;那我们努力还有什么用&#xff0c;开个玩笑而已&#xff0c;本人对于 vue 的接触时间不长&#xff0c;对其也没有深入地去研究源码&…...

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

企业网站托管服务常用指南/百度关键词点击排名

您好,我是独立顾问(Independent Advisor)Dexter,请让我来帮助您.WSL和Windows主系统之间的文件系统是可以互相访问的。如果在WSL中访问Windows系统的文件&#xff0c;可在根目录下/mnt/看到对应Windows盘符字母的文件夹&#xff0c;通过这些文件夹即可访问Windows的文件系统。如…...

编程日记 2025/1/10 6:53:39

中山哪家做网站好/宝鸡seo优化

【单选题】关于第一次工业革命,下列说法不正确的是()。【单选题】下列牌号中,哪一个是可锻铸铁( )【多选题】16. 下列项目中,属于营业外支出的是( )。【单选题】发展动力决定发展速度、效能、可持续性。请问( )是引领发展的第一动力。【单选题】我国的文化建设必须以马克思主义…...

编程日记 2025/1/10 4:07:03

笔记本怎么做1920宽的网站/百度收录查询接口

Part1:写在最前 在MysQL5.6版本中&#xff0c;可以把undo log 回滚日志分离到一个单独的表空间里&#xff1b;其缺点是不能回收空间大小&#xff0c;until MysQL5.7&#xff0c;but MariadDB10.1暂不支持。 本文介绍并演示MysQL5.7是如何在线收缩undo log的。 undo log日志是保…...

编程日记 2025/1/10 2:20:09

网站设计模板 英文翻译/响应式网站模板的优势

1、把html里的 codebase"./MyActiveX.ocx#version1,0" 暂时去掉&#xff0c;它会把*.doc下到临时目录并重新注册&#xff0c; 对调试产生影响。 2、用"Run"菜单中的 regiter activeX server注册。 3、编译运行&#xff0c;就可以断点了...

编程日记 2025/1/10 0:17:39

毕业设计做网站有什么好处/怎样优化网络

参与者列表&#xff1a; &#xff08;1&#xff09; Third-party application&#xff1a;第三方应用程序&#xff0c;又称客户端&#xff08;client&#xff09;&#xff0c;如&#xff1a;"云冲印"、社交应用。 &#xff08;2&#xff09;HTTP service&#xff1a;…...

编程日记 2025/1/9 23:52:24