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

JS-Web API -day03

news 来源：原创 2025/5/26 10:11:25

一、事件流

1.1 事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径

假设页面有个div标签，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

捕获阶段：Document - Element html - Elementbody - Element div 简单来说就是父到子

冒泡阶段：Element div - Elementbody - Element html - Document 简单来说就是子到父

事件冒泡的过程与事件捕获完全相反

实际工作都是使用事件冒泡为主

事件对象.stopPropagation()

1.2 事件捕获

从DOM的根元素开始去执行对应的事件（从外到里）

语法：

元素对象.addEventListener('事件类型',function (){}, 是否使用捕获机制)

说明：

addEventListener的第三个参数传入true代表是捕获阶段触发

若传入false代表冒泡阶段触发，默认就是false

若是使用L0事件监听，则只有冒泡阶段，没有捕获

例：
<style>.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
</style>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click',function (){alert('我是一级')}, true)fa.addEventListener('click',function (){alert('我是二级')}, true)son.addEventListener('click',function (){alert('我是三级')}, true)// 一级  二级 三级
</script>
</body>
弹出顺序我是一级，我是二级，我是三级。

1.3 事件冒泡

定义：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。简单理解就是当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

L2事件监听的第三个参数默认传的就是false,代表这个事件进行冒泡

例：
<style>.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
</style>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click',function (){alert('我是一级')})fa.addEventListener('click',function (){alert('我是二级')})son.addEventListener('click',function (e){alert('我是三级')e.stopPropagation()  // 借助事件对象 进行流的阶段})// 默认的就是false  就是冒泡   冒泡同名事件// 三级  二级 一级// 阻止冒泡 或者 捕获 就是  事件对象.stopPropagation()
</script>
</body>
触发顺序：

我是三级，我是二级，我是一级

1.4 阻止冒泡

原因：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内，就需要阻止事件冒泡。

语法：

事件对象.stopPropagation() 不仅可以阻止事件冒泡还和阻止事件捕获。
<style>.father{width: 500px;height: 300px;background-color: lightskyblue;}.son{width: 200px;height: 100px;background-color: black;}
</style>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click',function (){alert('我是一级')})fa.addEventListener('click',function (){alert('我是二级')})son.addEventListener('click',function (e){alert('我是三级')e.stopPropagation()  // 借助事件对象 进行流的阶段})// 阻止冒泡 或者 捕获 就是  事件对象.stopPropagation()
</script>
</body>
还有其他的阻止默认行为，比如表单的默认提交，链接的跳转，表单域跳转。

如:事件对象.preventDefault()
<body>
<form action="http://www.baidu.com"><input type="submit" value="提交">
</form>
<script>const form = document.querySelector('form');form.addEventListener('click', function(e) {// 阻止表单默认提交行为e.preventDefault();});
</script>
</body>

1.5 解绑事件

对应L0的on事件可以直接使用null覆盖就可以实现事件的解绑
<body>
<button>按钮</button>
<script>const btn = document.querySelector('button')// L0的解绑方式btn.onclick = function (){alert('点击了')}btn.onclick = null  // 给一个空对象 进行解绑
</script>
</body>
addEventListener方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
<body>
<button>按钮</button>
<script>const btn = document.querySelector('button')//最新的 L2function fn() {alert('点击了')}btn.addEventListener('click',fn)// L2 事件解绑  函数不能使用匿名函数btn.removeEventListener('click',fn)
</script>
</body>
注：匿名函数无法被解绑

二、事件委托

定义：

        事件委托是利用事件流的特征解决一些开发需求的知识技巧，可以同时给多个元素注册相同事件。

优点：

        减少注册次数，可以提高程序性能

原理：

        事件委托其实是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

实现

事件对象.target 是获取点击触发事件的元素对象

        事件对象.target. tagName 可以获得真正触发事件的元素的名称(大写)，如li的tagName就是‘LI’
<body>
<ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变颜色</p>
</ul><script>const ul = document.querySelector('ul')ul.addEventListener('click',function (e){// 获取点击的对象console.log(e.target);//只有点击li才会有效果  // 找到真正触发的元素e.target.tagName === 'LI' ? e.target.style.color = 'red' : null})
</script>
</body>

三、其他事件

3.1 页面加载事件

页面加载事件一

定义：加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：给window添加load事件

注：

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
<head><meta charset="UTF-8"><title>页面加载事件</title>
<script>// 监听整个页面资源加载完毕// 等待页面所有资源加载完成后，再去执行回调函数  load//给window 添加 load事件window.addEventListener('load',function (){const btn = document.querySelector('button')btn.addEventListener('click',function (){alert('点击了 按钮')})})// 针对某个资源绑定 load 事件document.querySelector('img').addEventListener('load',function (){// 等待图片加载完毕，再去执行里面的代码})</script>
</head>
<body>
<button>按钮</button>
<img src="">
</body>
页面加载事件二

定义：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：给 document 添加 DOMContentLoaded事件
<head><meta charset="UTF-8"><title>页面加载事件</title>
<script>//监听页面DOM加载完毕//给document添加DOMContentLoaded事件// 无需等待样式表 图像等完全加载document.addEventListener('DOMContentLoaded',function (){// 执行的操作})</script>
</head>
<body>
<button>按钮</button>
<img src="">
</body>

3.2 页面滚动事件

使用场景：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

定义：滚动条在滚动的时候持续触发的事件

事件名：scroll

作用：监听整个页面滚动，给 window 或 document 添加 scroll 事件(监听某个元素的内部滚动直接给某个元素加即可)
  // 页面滚动事件// 可以给window 也可以给 document 加// 检测滚动的距离//document.documentElement.scrollTop = 800   被卷去的头部window.addEventListener('scroll',function (){console.log('gun了')

3.2.1 页面滚动事件-获取位置

属性：scrollLeft和scrollTop

获取被卷去的大小

获取元素内容往左、往上滚出去看不到的距离

这两个值是可读写的

注：

尽量在scroll事件里面获取被卷去的距离

获取html 页面的最大标签元素 document.documentElement

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素。

<style>body {padding-left: 100px;height: 3000px;}div {overflow: scroll;margin: 0 auto;height: 500px;width: 300px;border: 1px solid black;}
</style>
<body>
<div>里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字里面有很多文字......
</div>
<script>window.addEventListener('scroll',function (){// 获取html 页面的最大标签元素 document.documentElementconst n = document.documentElement.scrollTop  // 是数字型数据 可读写if (n>= 100){div.style.display = 'block'}  else {div.style.display = 'none'}})
</script>
</body>

3.2.2页面滚动事件-滚动到指定的坐标

方法：scrollTo() 方法可把内容滚动到指定的坐标

语法：

元素对象.scrollTo(x, y)

例：让页面滚动到 y 轴（页面垂直方向）1000像素的位置
window.scrollTo(0, 1000)
// 也相当于
document.documentElement.scrollTop = 0

3.3 页面尺寸事件

事件名：resize，会在窗口尺寸改变的时候触发事件

获取元素宽高

事件名：clientWidth和clientHeight，获取元素的可见部分宽高（不包含边框，margin，滚动条等）

<style>div {display: inline-block;height: 200px;background-color: lightskyblue;padding: 10px;border: 20px solid black;}
</style>
<body>
<div>121235453134532</div>
<script>const div = document.querySelector('div');// 获取盒子的宽 或者 高  不包含边框 滚动条等console.log(div.clientWidth)// resize  页面缩放 浏览器窗口 大小发生变化的时候触发的事件// 目前更好的是CSS的媒体查询window.addEventListener('resize',function (){console.log(1)})
</script>
</body>

四、元素尺寸与位置

作用：

        就是通过js的方式，得到元素在页面中的位置

获取宽高：

        获取元素的自身宽高、包含元素自身设置的宽高、padding、border

        offsetWidth和offsetHeight

        获取出来的是数值,方便计算

  注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

获取位置1：

        获取元素距离自己定位父级元素的左、上距离

        offsetLeft和offsetTop （注意是只读属性）
<style>div {margin: 100px;width: 300px;height: 300px;border: 1px solid black;background-color: lightskyblue;}div p {padding: 50px;width: 100px;height: 100px;background-color: pink;}
</style>
<body><div><p></p></div>
<script>// 获取元素距离自己定位祖先元素的左offsetLeft 上offsetTop 距离// 获取的位置 是包含 边框的const  div = document.querySelector('div')const p = document.querySelector('p')// 外边框 到 最左边的距离  margin + body 的8外边框console.log(div.offsetLeft)// 加上外边框到最左边的距离 margin + body 的8外边框 + div的1外边框console.log(p.offsetLeft)
</script>
</body>
获取位置2：

元素对象.getBoundingClientRect()，方法返回元素的大小及其相对于视口的位置
<style>body {height: 2000px;}div {width: 300px;height: 300px;margin: 100px auto;background-color: lightskyblue;}
</style>
<body>
<div></div>
<script>const div = document.querySelector('div')// 是盒子相对于当前视口的位置console.log(div.getBoundingClientRect());
</script>
</body>

五、页面滚动事件和元素尺寸事件的属性总结

属性作用说明
scrollLeft和scrollTop 被卷去的左侧和头部配合页面滚动来用，可读写
clientWidth和clientHeight 获得元素宽度和高度不包含border,margin，滚动条用于js 获取元素大小，只读属性
offsetWidth和offsetHeight 获得元素宽度和高度包含border、padding，滚动条等，只读
offsetLeft和offsetTop 获取元素距离自己定位祖先元素的左、上距离获取元素位置的时候使用，只读属性

属性	作用	说明
scrollLeft和scrollTop	被卷去的左侧和头部	配合页面滚动来用，可读写
clientWidth和clientHeight	获得元素宽度和高度	不包含border,margin，滚动条用于js 获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读
offsetLeft和offsetTop	获取元素距离自己定位祖先元素的左、上距离	获取元素位置的时候使用，只读属性

JS-Web API -day03

一、事件流 1.1 事件流与两个阶段说明事件流指的是事件完整执行过程中的流动路径假设页面有个div标签，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段捕获阶段：Document - Element html - Elementbody - Element div…...

编程日记 2025/5/26 10:11:25

电子应用设计方案103：智能家庭AI浴缸系统设计

智能家庭 AI 浴缸系统设计一、引言智能家庭 AI 浴缸系统旨在为用户提供更加舒适、便捷和个性化的沐浴体验，融合了人工智能技术和先进的水疗功能。二、系统概述 1. 系统目标 - 实现水温、水位和水流的精确控制。 - 提供多种按摩模式和水疗功能。 - 具备智能清洁…...

编程日记 2025/5/26 8:42:27

linux静态库+嵌套makefile

linux静态库嵌套makefile 文章目录 linux静态库嵌套makefile1、概述2、代码结构3、代码1）main.c2）主makefile3）fun.c4）func.h5）静态库makefile 4、运行效果1）在main.c目录下执行make2）到output目…...

编程日记 2025/5/23 17:13:42

AIP-127 HTTP和gRPC转码

编号127原文链接AIP-127: HTTP and gRPC Transcoding状态批准创建日期2019-08-22更新日期2019-08-22 遵守面向资源设计的API使用RPC进行定义，但面向资源设计框架允许这些API表现为整体上符合REST/JSON约定的接口。这一点很重要，可以帮助开发者利用现有知…...

编程日记 2025/5/26 9:27:51

代码随想录算法训练营day32

代码随想录算法训练营 —day32 文章目录代码随想录算法训练营前言一、动态规划理论基础二、509. 斐波那契数动态规划动态规划优化空间版递归法三、70. 爬楼梯动态规划动态规划空间优化 746. 使用最小花费爬楼梯动态规划空间优化总结前言今天是算法营的第32天&#xff0c…...

编程日记 2025/5/26 8:38:11

设计模式的艺术-开闭原则

原则使用频率图（仅供参考） 1.如何理解开闭原则简单来说，开闭原则指的是 “对扩展开放，对修改关闭”。当软件系统需要增加新的功能时，应该通过扩展现有代码的方式来实现，而不是去修改已有的代码。例如我…...

编程日记 2025/5/25 17:44:10

【易康eCognition实验教程】003：点云数据加载浏览与操作详解

文章目录一、加载并创建点云数据二、三维浏览1. 点云模式2. 点云视图设置三、使用点云一、加载并创建点云数据本实验点云数据位于专栏配套实验数据包中的data003.rar中的terrian.las，解压后进行以下实验操作。打开ecognition软件，点击【File】→【…...

编程日记 2025/5/22 10:34:31

海外雅思备考经验

1.18号斯图雅思考试第一次考雅思，第一次在国外考雅思！ 最近在德国斯图加特联培，报考了1月18号的雅思机考，下面分享一些考试经验. ✌️考试地点 EZ Plus WEST Hasenbergstr. 31/1,, in the backyard of Hasenbergstrae 31, Stuttg…...

编程日记 2025/5/26 9:01:54

Oracle之Merge into函数使用

Merge into函数为Oracle 9i添加的语法，用来合并update和insert语句。所以也经常用于update语句的查询优化： 一、语法格式： merge into A using B on (A.a B.a) --注意on后面带括号，且不能更新join的字段 when matched then upd…...

编程日记 2025/5/23 0:11:14

Spring Boot 自定义属性

Spring Boot 自定义属性在 Spring Boot 应用程序中，application.yml 是一个常用的配置文件格式。它允许我们以层次化的方式组织配置信息，并且比传统的 .properties 文件更加直观。本文将介绍如何在 Spring Boot 中读取和使用 application.yml 中的配…...

编程日记 2025/5/24 7:03:23

前端面试题-问答篇-5万字！

1. 请描述CSS中的层叠（Cascade）和继承（Inheritance）规则，以及它们在实际开发中的应用。在CSS中，层叠（Cascade）和继承（Inheritance）是两个关键的规则&#x…...

编程日记 2025/5/26 7:34:05

2025年1月21日（树莓派点亮呼吸灯第一次修改）

系统信息： Raspberry Pi Zero 2W 系统版本： 2024-10-22-raspios-bullseye-armhf Python 版本：Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习目标：…...

编程日记 2025/5/26 8:33:43

【Linux网络编程】传输层协议

目录一，传输层的介绍二，UDP协议 2-1，UDP的特点 2-2，UDP协议端格式三，TCP协议 3-1，TCP报文格式 3-2，TCP三次握手 3-3，TCP四次挥手 3-4，滑动窗口 3-5&#xf…...

编程日记 2025/5/24 1:58:35

JavaScript系列（41）--状态管理实现详解

JavaScript状态管理实现详解 🔄 今天，让我们深入探讨JavaScript的状态管理实现。状态管理是现代前端应用中的核心概念，它帮助我们有效地管理和同步应用数据。状态管理基础概念 🌟 💡 小知识：状态管理是一…...

编程日记 2025/5/26 3:05:04

flume和kafka整合 flume和kafka为什么一起用？

‌Flume和Kafka一起使用的主要原因是为了实现高效、可靠的数据采集和实时处理。‌‌12 实时流式日志处理的需求 Flume和Kafka结合使用的主要目的是为了完成实时流式的日志处理。Flume负责数据的采集和传输，而Kafka则作为消息缓存队列，能够有效地缓冲数据，防止数据堆积或丢…...

编程日记 2025/5/24 15:14:44

【深度学习】自动微分

自动微分正如上节所说，求导是几乎所有深度学习优化算法的关键步骤。虽然求导的计算很简单，只需要一些基本的微积分。但对于复杂的模型，手工进行更新是一件很痛苦的事情（而且经常容易出错）。深度学习框架通过自动…...

编程日记 2025/5/23 18:38:06

什么是三高架构?

大家好，我是锋哥。今天分享关于【什么是三高架构?】面试题。希望对大家有帮助； 什么是三高架构? 1000道互联网大厂Java工程师精选面试题-Java资源分享网 “三高架构”通常是指高可用性（High Availability）、高性能&#xff…...

编程日记 2025/5/25 23:11:55

QuestionViewCell.h文件代码，定义代理协议 protocol QuestionViewCellDelegate <NSObject>- (void)cellIsOpenDidChangeAtIndexPath:(NSIndexPath *)indexPath;endinterface QuestionViewCell : UITableViewCellproperty (nonatomic, weak) id<QuestionVi…...

编程日记 2025/5/23 21:33:24

【flutter版本升级】【Nativeshell适配】nativeshell需要做哪些更改

flutter 从3.13.9 升级：3.27.2 nativeshell组合库中的 1、nativeshell_build库替换为github上的最新代码可以解决两个问题： 一个是arg("--ExtraFrontEndOptions--no-sound-null-safety") 在新版flutter中这个构建参数不支持了导致的build错误…...

编程日记 2025/5/23 8:35:41

C#编程：List.ForEach与foreach循环的深度对比

在C#中，List<T>.ForEach 方法和传统的 foreach 循环都用于遍历列表中的元素并对每个元素执行操作，但它们之间有一些关键的区别。 List<T>.ForEach 方法方法签名：public void ForEach(Action<T> action)类型：…...

编程日记 2025/5/25 1:35:39

leetcode_2762. 不间断子数组

2762. 不间断子数组 - 力扣（LeetCode） 运用滑动窗口和multise(平衡二叉树实现) 符合条件右窗口向右扩展不符合条件左窗口向左扩展 class Solution { public:long long continuousSubarrays(vector<int>& nums) {int max, min; //表示窗…...

编程日记 2025/5/22 8:43:22

Java学习教程，从入门到精通，JDBC创建数据库语法知识点及案例代码（99）

JDBC创建数据库语法知识点及案例代码一、JDBC创建数据库语法在JDBC中，创建数据库主要通过执行SQL语句来实现。其基本语法如下： CREATE DATABASE database_name;CREATE DATABASE 是固定的SQL语句关键字，用于指定创建数据库的操作。databa…...

编程日记 2025/5/23 8:32:31

进阶——第十六届蓝桥杯（sscanf的运用）

声明变量 char tx_buf[30];char rx_buf[30];char car_type[5];char car_num[5];char car_time[15]; int sscanf(const char *str, const char *format,...); sscanf函数功能 sscanf 函数从字符串 str 中读取数据，根据 format 所指定的格式将数据存储到后续的变量中…...

编程日记 2025/5/21 23:34:18

嵌入式硬件篇---ADC模拟-数字转换

文章目录前言第一部分：STM32 ADC的主要特点1.分辨率2.多通道3.转换模式4.转换速度5.触发源6.数据对齐7.温度传感器和Vrefint通道第二部分：STM32 ADC的工作流程：1.配置ADC2.启动ADC转换第三部分：ADC转化1.抽样2.量化3.编码第四…...

编程日记 2025/5/25 1:34:35

Spark Streaming编程基础

文章目录 1. 流式词频统计1.1 Spark Streaming编程步骤1.2 流式词频统计项目1.2.1 创建项目1.2.2 添加项目依赖1.2.3 修改源目录1.2.4 添加scala-sdk库1.2.5 创建日志属性文件 1.3 创建词频统计对象1.4 利用nc发送数据1.5 启动应用，查看结果 2. 编程模型的基本概念3…...

编程日记 2025/5/25 7:41:29

android wifi AsyncChannel（WifiManager和WifiP2pManager）

AynscChannel的讲解 [Android]AsyncChannel介绍-CSDN博客 WifiP2pManager里的channel的使用理解 WifiP2pManager.java public void createGroup(Channel c, ActionListener listener) {checkChannel(c);c.mAsyncChannel.sendMessage(CREATE_GROUP, WifiP2pGroup.NETWORK_ID_PE…...

编程日记 2025/5/26 6:41:36

生存网络与mlr3proba

在R语言中，mlr3包是一个用于机器学习的强大工具包。它提供了一种简单且灵活的方式来执行超参数调整。生存网络是一种用于生存分析的模型，常用在医学和生物学领域。生存分析是一种统计方法，用于研究事件发生的时间和相关因素对事件发生的影响。生存网络可以用来预测个体在给…...

编程日记 2025/5/25 5:56:04

C#Object类型的索引，序列化和反序列化

前言最近在编写一篇关于标准Mes接口框架的文章。其中有一个非常需要考究的内容时如果实现数据灵活和可使用性强。因为考虑数据灵活性，所以我一开始选取了Object类型作为数据类型，Object作为数据Value字段，String作为数据Key字段&#xff0c…...

编程日记 2025/5/26 6:41:10

【动态规划】记忆化搜索

Ban or Problem - A - Codeforces 【CCPC】2022年绵阳站部分题解（ACGM）_ban or pick, whats the trick-CSDN博客 #include<iostream> using namespace std; #include<cstring> #include<algorithm> #define inf -0x3f3f3f3f #defi…...

编程日记 2025/5/23 14:49:32

深度学习 DAY1：RNN 神经网络及其变体网络（LSTM、GRU）

实验介绍 RNN 网络是一种基础的多层反馈神经网络，该神经网络的节点定向连接成环，其内部状态可以展示动态时序行为。相比于前馈神经网络，该网络内部具有很强的记忆性，它可以利用它内部的记忆来处理任意时序的输入序列，…...

编程日记 2025/5/20 6:12:45

BW复制ERP数据源跑程序激活后才可见

场景： BW提取ERP数据走ODP通道之后，数据源需要用下列程序激活加入白名单后才能被BW系统访问到； 检查： 1、RSA6检查数据源是否可正常使用，若为绿√表示可正常访问，反之，则不行。 2、白名单表ROO…...

编程日记 2025/5/25 9:00:34

MarsCode青训营打卡Day10（2025年1月23日）|稀土掘金-147.寻找独一无二的糖葫芦串、119.游戏队友搜索

资源引用： 147.寻找独一无二的糖葫芦串 119.游戏队友搜索今日小记： 回乡聚会陪家人，休息一天~ 稀土掘金-147.寻找独一无二的糖葫芦串（147.寻找独一无二的糖葫芦串） 题目分析： 给定n个长度为m的字符串表…...

编程日记 2025/5/25 2:48:42

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整 0 前言之前文章添加了一个自定义的模块，本篇文章在之前的自定义模块中，添加两个自定义参数使用QGC显示出来，并通过QGC调整参数值，代码实现参数更新新增的参…...

编程日记 2025/5/25 7:28:43

【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

【全栈】SprintBootvue3迷你商城-扩展：vue3项目创建及目录介绍往期的文章都在这里啦，大家有兴趣可以看一下【全栈】SprintBootvue3迷你商城（1） 【全栈】SprintBootvue3迷你商城（2） 【全栈】SprintBootvu…...

编程日记 2025/5/20 7:57:46

Linux系统 C/C++编程基础——基于Qt的图形用户界面编程

ℹ️大家好，我是练小杰，今天周四了，距离除夕只有4天了，各位今年卫生都搞完了吗！😆 本文是接着昨天Linux 系统C/C编程的知识继续讲，基于Qt的图形用户界面编程概念及其命令，后续会不断…...

编程日记 2025/5/23 7:40:30

23.日常算法

1. 最小绝对差题目来源给你个整数数组 arr，其中每个元素都不相同。请你找到所有具有最小绝对差的元素对，并且按升序的顺序返回。每对元素对 [a,b] 如下： a , b 均为数组 arr 中的元素 a < b b - a 等于 arr 中任意两个元素的最小绝对…...

编程日记 2025/5/22 8:06:41

迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-添加内核编译

编译内核时将该 HDF 驱动编译到镜像中，接下来编写驱动编译脚本 Makefile，代码如下所示： 加入编译体系，填加模块目录到 drivers/hdf_core/adapter/khdf/linux/Makefile 文件更多内容可以关注：迅为RK3568开发板篇OpenHa…...

编程日记 2025/5/22 21:48:51

为AI聊天工具添加一个知识系统之54 为事务处理设计基于DDD的一个 AI操作系统来处理维度

本文要点要点 Architecture程序它被设计为一个双面神结构的控制器，它的两侧一侧编译执行另一侧解释执行，自已则是一个翻译器--通过提供两个不同取向之间的结构映射的显示器（带图形用户接口GUI和命令行接口CLI 两种接口&#xff09…...

编程日记 2025/5/22 23:41:26

Golang 中除了加锁还有哪些安全读写共享变量的方式？

Golang 中除了加锁还有哪些安全读写共享变量的方式？ 在 Golang 中，除了使用 Mutex 锁来保护共享变量外，还可以通过 Channel 和原子性操作来实现安全读写共享变量。 1. 使用 Channel 原理 Channel 是 Golang 中用于 Goroutine 之间通信的…...

编程日记 2025/5/25 8:40:38

【优选算法】8----四数之和

有看过我上篇算法博客并且去做过的铁子们，对这道题的话应该就不会那么陌生了，因为这两道题的解题思路有着异曲同工之妙~ -----------------------------------------begin------------------------------------- 题目解析： 跟三数之和就多了…...

编程日记 2025/5/22 6:21:22

订单状态定时处理、来单提醒和客户催单（day10）

Spring Task 介绍 Spring Task 是 Spring 框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。定位： 定时任务框架作用： 定时自动执行某段Java代码为什么要在 Java 程序中使用 Spring Task？ 应用场景&#xff1…...

编程日记 2025/5/21 17:10:26

备赛蓝桥杯之第十五届职业院校组省赛第一题：智能停车系统

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

编程日记 2025/5/25 23:27:56

【2024年华为OD机试】(C卷,100分)- 查找接口成功率最优时间段（JavaScriptJava PythonC/C++）

一、问题描述题目解析题目描述服务之间交换的接口成功率作为服务调用关键质量特性，某个时间段内的接口失败率使用一个数组表示。数组中每个元素都是单位时间内失败率数值，数组中的数值为 0~100 的整数。给定一个数值 minAverageLost，表…...

编程日记 2025/5/24 6:14:32

Linux进度条实现

Linux进度条实现 1.\r\n2.缓冲区3.缓冲区分类4.进度条实现 🌟🌟hello，各位读者大大们你们好呀🌟🌟 🚀🚀系列专栏：【Linux的学习】 📝📝本篇内容：\…...

编程日记 2025/5/26 3:55:16

Java如何实现反转义

Java如何实现反转义前提最近做的一个需求，是热搜词增加换一批的功能。功能做完自测后，交给了测试伙伴，但是测试第二天后就提了一个bug，出现了未知词 levis。第一眼看着像公司售卖的一个品牌-李维斯。然后再扒前人写的代码&…...

编程日记 2025/5/22 21:45:34

计算机网络（57）改进“尽最大努力交付”的服务

前言计算机网络中的“尽最大努力交付”服务是网络层的一种数据传输方式。这种服务的特点是网络层只负责尽力将数据报从源端传输到目的端，而不保证数据传输的可靠性。一、标记与分类为数据分组打上标记： 给不同性质的分组打上不同的标记&#x…...

编程日记 2025/5/24 16:08:42

Java 基于 SpringBoot 的校园外卖点餐平台微信小程序（附源码，部署，文档）

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

编程日记 2025/5/22 11:48:09

重构（4）

（一）添加解释性变量，使得代码更容易理解，更容易调试，也可以方便功能复用解释性的变量总价格为商品总价（单价*数量）-折扣（超过100个以上的打9折）邮费（原价的…...

编程日记 2025/5/25 6:10:42

【Arduino】语言参考功能

前言翻译Arduino 参考处列出的常用函数。文中为了减少篇幅，达到能快速翻到查询的目标，在介绍函数中，对部分内容进行了省略，不会列出函数输入参数类型，以及使用注意事项等等，所以若是首次使用或者是调试时出…...

编程日记 2025/5/25 18:46:57

CMake使用CPack制作安装程序

CPack的功能很强大，笔者前面有一博文使用CMake的CPack工具打包项目介绍了一下使用CPack来打包成7z压缩文件，不仅如此，它还可以生成各平台的安装包。 CPack支持以下类型的生成器： 名称文件类型平台及说明STGZSTGZ(.sh)自解压文件…...

编程日记 2025/5/24 15:55:04