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

javascrip页面交互

news 2026/5/26 14:26:40

元素的三大系列

offset系列

offset初相识

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级没有定位，则返回body
element.offsetTop	返回元素相对于有定位父元素上方的偏移量
element.offsetLeft	返回元素相对于有定位父元素左方的偏移量
element.offsetWidth	返回自身包括padding、边框、内容区的宽度、返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度、返回数值不带单位

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding，内容区宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding，内容区高度，不含边框，返回数值不带单位

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度（实际内容的宽度），不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度（实际内容的宽度），不含边框，返回数值不带单位

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding，边框，内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding，内容区宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际宽度，不含边框，返回数值不带单位

使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素距离带有定位祖先元素的位置

获得元素自身的大小（宽度高度）

注意：返回的数值都不带单位

offset系列常用属性

offset与style区别

offset	style
offset可以得到任意样式表中的样式值(行内，内部)	style只能得到行内样式表中的样式值
offset系列获得的数值时没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性时只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
我们想要获取元素大小为止，用offset更合适	要给元素更改值，则需要用style改变

<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;border: 1px solid red;margin: 50px auto;position: relative;}.box1 {width: 100px;height: 100px;background-color: orange;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style></head><body><div class="box"><div class="box1"></div></div><div class="box2" style="width: 50px; height: 50px; background-color: red; border: 10px solid green"></div><script>var box = document.querySelector(".box");var box1 = document.querySelector(".box1");var box2 = document.querySelector(".box2");// 一、 通过offset获取值// 1、获取该元素带有定位的父级元素，如果父级没有定位，则返回body// console.log(box1.offsetParent, "offsetParent");// 2、返回元素相对于定位父元素上方的偏移量// console.log(box1.offsetTop, "offsetTop");// 3、返回元素相对于定位父元素左方的偏移量// console.log(box1.offsetLeft, "offsetLeft");// 4、返回自身的宽度（包括内容区，边框，padding）// console.log(box.offsetWidth, "offsetWidth");// 5、返回自身的高度（包括内容区，边框，padding）// console.log(box.offsetHeight, "offsetHeight");// 二、通过style获取值// 1、style只能获取行内样式表中的样式值// 不包括padding和border// console.log(box2.style.width); //50px//2、 可读可写// box2.style.width = "200px";</script>

client系列

client初相识

使用client系列的相关属性来获取元素可视区的相关信息，可以动态的得到该元素的边框大小，元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding，内容区宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding，内容区高度，不含边框，返回数值不带单位

<head><meta charset="UTF-8" /><title>client</title><style>.box {width: 100px;height: 100px;background-color: red;border: 10px solid orange;padding: 20px;margin: 100px auto;}</style></head><body><div class="box"></div><script>var box = document.querySelector(".box");// 1、返回元素上边框大小//console.log(box.clientTop); //10// 2、返回元素左边框大小//console.log(box.clientLeft); //10// 3、返回自身的宽度，包括padding，内容区，不含边框// console.log(box.clientWidth); //140// 3、返回自身的高度，包括padding，内容区，不含边框// console.log(box.clientHeight); //140</script></body>

client的应用-flexible.js解析


// 立即执行函数   传入window，document参数
(function flexible(window, document) {// 获取html根标签  我们是通过更改html根标签的大小来改变页面大小的var docEl = document.documentElement;// 获取物理像素比，window.devicePixelRatio获取当前的dpr值，如果没有就是1var dpr = window.devicePixelRatio || 1;// adjust body font size//设置body字体大小function setBodyFontSize() {// 如果页面中有body这个元素，就设置body的字体大小if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {// 如果页面中没有body这个元素，则等着我们页面主要dom元素加载完后，设置页面字体大小document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10// 设置html元素的文字大小function setRemUnit() {// 将页面的大小平均划分为10等份，为整个页面的大小// 设置html根字体大小的变化var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resize// 如果页面尺寸大小发生了变化，要重新设置rem大小window.addEventListener("resize", setRemUnit);// pageshow  是我们重新加载页面触发的事件window.addEventListener("pageshow", function (e) {//  如果是从缓存取过来的页面，也需要重新计算rem大小，为了兼容浏览器的if (e.persisted) {setRemUnit();}});// detect 0.5px supports// 有些移动端浏览器不支持0.5像素的写法， 通过一下代码，进行兼容if (dpr >= 2) {// 创建一个假的body元素，用于临时添加测试元素以检测某些样式效果var fakeBody = document.createElement("body");// 创建一个测试用的div元素var testElement = document.createElement("div");// 设置测试元素的边框样式，目的是检测在当前环境下边框的实际渲染高度testElement.style.border = ".5px solid transparent";// 将测试元素添加到假body中fakeBody.appendChild(testElement);// 将假body添加到文档的body元素中，以便在当前页面环境中渲染测试元素docEl.appendChild(fakeBody);// 检测测试元素的渲染高度是否为1，这可以用来判断设备的像素比或浏览器的渲染特性if (testElement.offsetHeight === 1) {// 如果测试元素的高度为1，表明可能存在高像素比屏幕或其他渲染特性// 在这种情况下，为docEl添加类名"hairlines"，以便通过CSS提供更合适的样式docEl.classList.add("hairlines");}// 清理测试元素，移除假body，以避免对页面其他部分造成潜在影响docEl.removeChild(fakeBody);}
})(window, document);

scroll系列

scroll初相识

利用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等

小结

offset系列进行用于获得元素位置 offsetLeft offsetTop

client经常用于获取元素大小 clientWidth clientHeight

sroll经常用于获取滚动距离 scrollTop

事件对象的相关大小：

尺寸标记图.webp

动画函数封装

简单动画实现

核心原理：通过定时器setInterval()不断移动盒子位置

实现步骤：

获得盒子当前位置、

让盒子在当前位置上加上1个移动距离、

利用定时器不断重复这个操作、

加一个结束定时器的条件

需要给元素加定位，利用left值变化改变元素的位置

  <!-- 需求：小盒子从左向右移动，移动到500px的地方，停下 -->
<script>var box = document.querySelector("div");var timer = setInterval(function () {if (box.offsetLeft === 500) {clearInterval(timer);return;}box.style.left = box.offsetLeft + 10 + "px";}, 30);</script>

简单动画函数封装

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>02.封装简单动画函数</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;background-color: #bfa;position: relative;left: 0;}span {background-color: pink;position: relative;left: 0;}</style></head><body><div>动画1</div><span>动画2</span><!-- 封装函数，传入不同的对象，目标停止值，都可以调用动画 --><script>function animation(obj, target) {var timer = setInterval(function () {if (obj.offsetLeft === target) {clearInterval(timer);return;}obj.style.left = obj.offsetLeft + 10 + "px";}, 30);}var box = document.querySelector("div");var s1 = document.querySelector("span");animation(box, 500);animation(s1, 300);</script></body>
</html>

优化动画函数

动画函数给不同的元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同元素使用不同的定时器（自己用自己的定时器）

核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>03.优化动画函数</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: #bfa;position: relative;left: 0;}span {background-color: pink;position: relative;left: 0;}</style></head><body><div>动画1</div><br /><button>点击按钮，执行动画函数</button><br /><span>动画2</span><!-- 优化1:根据传入的不同对象，将timer作为属性添加给不同的对象，减少开辟的空间 --><!-- 优化2:保证只有一个定时器在执行 --><script>function animation(obj, target) {//在开启动画前，先关闭前一个定时器，保证只有一个定时器在执行clearInterval(obj.timer);obj.timer = setInterval(function () {if (obj.offsetLeft >= target) {clearInterval(obj.timer);//优化3:当达到目标值后，再点击也不会执行了return;}obj.style.left = obj.offsetLeft + 10 + "px";}, 30);}var box = document.querySelector("div");var s1 = document.querySelector("span");var btn = document.querySelector("button");btn.addEventListener("click", function () {animation(s1, 300);});animation(box, 500);</script></body>
</html>

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长

停止的条件是：让当前盒子位置等于目标位置就停止定时器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>04.缓动画实现</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: pink;position: relative;left: 0;}</style></head><body><button>点击按钮，执行动画函数</button><br /><div>动画2</div><script>function animation(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 定义step，来代表每次移动的距离值，（目标值-现在的位置）/10var step = (target - obj.offsetLeft) / 10;if (obj.offsetLeft == target) {clearInterval(obj.timer);return;}obj.style.left = obj.offsetLeft + step + "px";}, 30);}var s1 = document.querySelector("div");var btn = document.querySelector("button");btn.addEventListener("click", function () {animation(s1, 500);});</script></body>
</html>

动画函数优化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>05.优化缓动动画动画函数</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: pink;position: absolute;left: 0;}</style></head><body><button id="btn01">点击按钮，执行动画函数 500</button><br /><button id="btn02">点击按钮，执行动画函数 800</button><br /><div>丹洋其</div><script>//优化三  加回调函数，可以在执行动画后，再执行其他内容function animation(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 定义step，来代表每次移动的距离值// 优化一：对于step会涉及到小数，将小数向上取整// var step = Math.ceil((target - obj.offsetLeft) / 10);// 优化二：动画还是会涉及到往回走，如果往回走，则step会是负值，要向小取整var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearInterval(obj.timer);// 如果传入了回调，则执行回调，否则，就不执行if (callback) {callback();}} else {// console.log(222);obj.style.left = obj.offsetLeft + step + "px";}}, 15);}var s1 = document.querySelector("div");var btn01 = document.querySelector("#btn01");var btn02 = document.querySelector("#btn02");btn01.addEventListener("click", function () {animation(s1, 500);});btn02.addEventListener("click", function () {animation(s1, 800, function () {alert("111");});});</script></body>
</html>

animation.js文件并使用

animation.js

简单使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.nav {width: 30px;height: 30px;background-color: blueviolet;position: fixed;text-align: center;line-height: 30px;right: 0px;top: 40%;}.con {position: absolute;left: 0px;top: 0;width: 200px;height: 30px;background-color: blueviolet;z-index: -1;}</style><script src="./animation.js"></script></head><body><div class="nav"><span>⬅️</span><div class="con">移入弹出</div></div><script>var s1 = document.querySelector("span");var nav = document.querySelector(".nav");var con = document.querySelector(".con");nav.addEventListener("mouseenter", function () {animation(con, -170, function () {s1.innerHTML = "➡️";});});nav.addEventListener("mouseleave", function () {animation(con, 0, function () {s1.innerHTML = "⬅️";});});</script></body>
</html>

JSON数据

本地存储

localstorage、Sessionstorage是Web Storage，H5的本地存储机制。是本地存储，存储在客户端，以键/值对的形式存储的，通常以字符串存储。

是针对HTML4中 Cookie 存储机制的一个改善，由于Cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的 Web Storage 存储机制。

Cookie

（1）、定义

Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。

客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

（2）、作用

保存用户登录状态

跟踪用户行为

定制页面

创建购物车：使用cookie来记录用户需要购买的商品，再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品，方便随时进行比较)

window.sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口（页面）下数据可以共享

存储空间相对较小

以键值对的形式存储使用

sessionStorage.setItem(key,value); //存储数据sessionStorage.getItem(key);//获取数据sessionStorage.removeItem(key);//删除数据sessionStorage.clear();//清除数据

window.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在

可以多窗口（页面）共享（同一个浏览器可以共享）

存储空间较大

以健值对的形式存储使用

localStorage.setItem(key,value); //存储数据localStorage.getItem(key);//获取数据localStorage.removeItem(key);//删除数据localStorage.clear();//清除数据

记住用户名案例

如果勾选记住用户名，下次用户打开浏览器，就在文本框里自动显示上次登录的用户名

<body><input type="text" id="username" /><input type="checkbox" id="checkbox" />记住用户名<script>var userInt = document.getElementById("username");var checkbox = document.getElementById("checkbox");// 判断本地是否存储了username，存了就取出来赋值给input，并勾选复选框if (localStorage.getItem("username")) {userInt.value = localStorage.getItem("username");checkbox.checked = true;}checkbox.addEventListener("change", function () {if (this.checked) {localStorage.setItem("username", userInt.value);} else {localStorage.removeItem("username");}});</script></body>

javascrip页面交互

元素的三大系列 offset系列 offset初相识 offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级没有定位，则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…...

编程日记 2024/11/24 5:24:47

【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G

「【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G」复制下方口令，打开最新版「夸克APP」即可获取保存（防止和谐！！！） 口令： 动作懿范鉴真渡多好备用口令： /~19dc35…...

编程日记 2024/11/24 5:23:45

【论文阅读】WGSR

0. 摘要 0.1. 问题提出 1.超分辨率(SR)是一个不适定逆问题，可行解众多。 2.超分辨率(SR)算法在可行解中寻找一个在保真度和感知质量之间取得平衡的“良好”解。 3.现有的方法重建高频细节时会产生伪影和幻觉，模型区分图像细节与伪影仍是难题。 0.2. …...

编程日记 2024/11/24 5:22:40

打造智能化在线教育平台详解：教培网校APP的架构设计与实现

本篇文章，小编将以教培网校APP的架构设计与实现为核心，深入探讨如何打造一套智能化的在线教育平台，为企业和教育机构提供落地参考。一、在线教育平台的核心功能需求构建一个高效的教培网校APP，首先需要明确其核心功能需求。一…...

编程日记 2024/11/24 5:21:37

使用同一个链接，如何实现PC打开是web应用，手机打开是一个H5应用

当我们希望通过同一个 URL，根据访问设备展示不同的页面时，可以选择以下几种方法： 方法一：通过 User-Agent 前端判断设备类型并跳转利用前端 JavaScript 获取浏览器的 User-Agent 字符串，判断设备类型，跳转…...

编程日记 2024/11/24 5:20:36

STM32-- 调试 -日志输出

在调试嵌入式程序时，输出日志是非常重要的环节，可以帮助开发者定位问题、监控程序状态和性能。以下是几种常见的日志输出方式及其适用场景： 1. 使用串口（UART）输出日志实现方式： 通过串口将日志输出到主…...

编程日记 2024/11/24 5:18:32

Python爬虫案例八：抓取597招聘网信息并用xlutils进行excel数据的保存

excel保存数据的三种方式： 1、pandas保存excel数据，后缀名为xlsx; 举例： import pandas as pddic {姓名: [张三, 李四, 王五, 赵六],年龄: [18, 19, 20, 21],住址: [广州, 青岛, 南京, 重庆] } dic_file pd.DataFrame(dic) dic_file…...

编程日记 2024/11/24 5:17:31

小试牛刀-Anchor安装和基础测试

目录一、编写目的二、安装步骤 2.1 安装Rust 设置rustup镜像安装Rust 2.2 安装node.js 2.3 安装Solana-CLI 2.4 安装Anchor CLI 三、Program测试四、可能出现的问题 Welcome to Code Blocks blog 本篇文章主要介绍了 [Anchor安装和基础测试] 博主广交技术好友&…...

编程日记 2024/11/24 5:14:29

51单片机基础01 单片机最小系统

目录一、什么是51单片机二、51单片机的引脚介绍 1、VCC GND 2、XTAL1 2 3、RST 4、EA 5、PSEN 6、ALE 7、RXD、TXD 8、INT0、INT1 9、T0、T1 10、MOSI、MISO、SCK 11、WR、RD 12、通用IO P0 13、通用IO P1 14、通用IO P2 三、51单片机的最小系统 1、供电与…...

编程日记 2024/11/24 5:11:24

RocketMQ文件刷盘机制深度解析与Java模拟实现

引言在现代分布式系统中，消息队列（Message Queue, MQ）作为一种重要的中间件，扮演着连接不同服务、实现异步通信和消息解耦的关键角色。Apache RocketMQ作为一款高性能的分布式消息中间件，广泛应用于实时数据流处理、…...

编程日记 2024/11/24 5:09:17

python语言基础-5 进阶语法-5.3 流式编程

声明：本内容非盈利性质，也不支持任何组织或个人将其用作盈利用途。本内容来源于参考书或网站，会尽量附上原文链接，并鼓励大家看原文。侵删。 5.3 流式编程（参考链接：https://www.zhihu.com/question/59062…...

编程日记 2024/11/24 5:08:08

JVM性能分析工具JProfiler的使用

一、基本概念 JProfiler：即“Java Profiler”，即“Java分析器”或“Java性能分析工具”。它是一款用于Java应用程序的性能分析和调试工具，主要帮助开发人员识别和解决性能瓶颈问题。 JVM：即“Java Virtual Machine”&#xff0c…...

编程日记 2024/11/24 5:06:02

面试题: Spring中的事务是如何实现的?

Spring中的事务是如何实现的? 背景个人原因的背景正规一点的背景答案一些思绪和灵感个人理解程度拓展知识Spring的事务管理主要涉及哪几个类?在Spring中，事务管理的流程是怎样的? 背景个人原因的背景想换工作, 刷面试题看到的问题, 简单记录一下, 算是个人…...

编程日记 2024/11/24 4:58:55

vue2-代理服务器插槽

解决跨域问题配置代理服务器代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后，前端应用的请求不再直接发送到后端服务器，而是发送到代理服务器。代理服务器在接收到请求后，会根据预先配置的规则将请求转发到真…...

编程日记 2024/11/24 4:57:53

（python）unittest框架

unittest unnitest介绍 TestCase测试用例书写真正的用例脚本...

编程日记 2024/11/24 4:54:50

网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务

编程日记 2024/11/24 4:53:48

面试小结（一）

1、hashmap的底层设计原理以及扩容规则，是否线程安全，如何线程安全。底层原理：数组链表红黑树。HashMap 的底层实现是一个数组，数组中的每个元素是一个链表或红黑树（JDK 1.8 以后，当链表长度超过一定…...

编程日记 2024/11/24 4:51:47

笔试-笔记2

1.设存在函数int max(int,int)返回两参数中较大值，若求22，59，70三者中最大值，下列表达式不正确的是() A.int mmax(22,59,70); B.int mmax(22,max(59,70)); C.int mmax(max(22,59),70); D.int mmax(59,max(22,70)); 解析&#xf…...

编程日记 2024/11/24 4:50:46

html5复习二

知识点： 1、音频标签 <audio controls"controls" loop"loop" preload"auto" src"张恒远 - 追梦赤子心.mp3" muted"muted" > </audio> controls:显示控件必须写 loop：循环播放&#x…...

编程日记 2024/11/24 4:49:43

大模型呼入机器人系统如何建设？

大模型呼入机器人系统如何建设？ 作者：开源呼叫中心系统 FreeIPCC, Github地址：https://github.com/lihaiya/freeipcc 大模型呼叫中心呼入机器人系统的建设是一个涉及多个环节和领域的综合性工程。以下是一个详细的步骤指南，涵盖了…...

编程日记 2024/11/24 4:47:38

用数字逻辑门复刻柏林钟：从二进制编码到硬件实现

1. 项目概述：用数字电路复刻“柏林钟”作为一个在柏林长大的孩子，我从小就对库达姆大街上的那座“柏林钟”着迷。它不像传统时钟那样用指针或数字告诉你时间，而是通过几排不同颜色的发光方块，以一种近乎艺术的方式呈现时间。这种独…...

编程新知 2026/5/26 2:23:31

ThinkPad开机报错0183/0253？别慌，手把手教你搞定EFI变量错误（附BIOS重置教程）

ThinkPad开机报错0183/0253？EFI变量错误全面解决方案当你按下ThinkPad的电源键，期待熟悉的开机画面时，屏幕上却突然跳出一串神秘代码——"0183: Bad CRC of Security Settings in EFI Variable"或"0253: EFI Variable Block D…...

编程新知 2026/5/26 1:47:12

为什么软件开发偏爱 Linux？深度剖析 Linux 相较于 Windows 的核心优势

引言在软件开发的世界里，一个有趣的现象是：无论是大型互联网公司的服务器集群，还是资深程序员的个人开发机，Linux 操作系统的身影无处不在。与之形成鲜明对比的是，尽管 Windows 在个人消费市场占据绝对主导地位&…...

编程新知 2026/5/26 0:24:13

保姆级避坑指南：在Ubuntu 22.04上搞定ROS2 Humble、PX4与Gazebo的联合仿真（附Empy版本降级）

保姆级避坑指南：Ubuntu 22.04下ROS2 Humble与PX4联合仿真的21个关键陷阱当你在Ubuntu 22.04上第一次尝试搭建ROS2 Humble、PX4与Gazebo的联合仿真环境时，可能会遇到比预期更多的挑战。这不是一个简单的"复制粘贴命令就能完成"的任务——版本冲…...

编程新知 2026/5/25 23:12:51

OpenIPC开源固件：5分钟解锁网络摄像头的终极控制权

OpenIPC开源固件：5分钟解锁网络摄像头的终极控制权【免费下载链接】firmware Alternative IP Camera firmware from an open community 项目地址: https://gitcode.com/gh_mirrors/fir/firmware 还在为网络摄像头的封闭系统而烦恼吗？想要完全掌控…...

编程新知 2026/5/25 21:19:36

Keil µVision反汇编窗口内容导出方案与调试技巧

1. 问题背景与需求解析在嵌入式开发过程中，调试环节往往占据大量时间。Keil Vision作为业界广泛使用的集成开发环境(IDE)，其调试器功能强大但某些细节功能仍有提升空间。最近我在使用C251架构开发汽车电子控制单元时，就遇到了一个看似简单却影…...

编程新知 2026/5/25 20:16:02

基于Atmega 1284P的16位复古计算器：硬件设计与软件实现全解析

1. 项目概述与核心思路最近在整理工作室时，翻出了一堆老旧的7段数码管和矩阵键盘，看着这些充满复古气息的元件，一个想法冒了出来：为什么不自己动手做一台复古风格的计算器呢？不是那种用液晶屏显示的现代计算器&#xf…...

编程新知 2026/5/25 17:19:23

5分钟掌握AutoClicker：Windows鼠标点击自动化的终极指南

5分钟掌握AutoClicker：Windows鼠标点击自动化的终极指南【免费下载链接】AutoClicker AutoClicker is a useful simple tool for automating mouse clicks. 项目地址: https://gitcode.com/gh_mirrors/au/AutoClicker AutoClicker是一款专为Windows设计的鼠…...

编程新知 2026/5/25 15:39:42

基于特征工程的电力系统虚假数据注入攻击检测方案

1. 项目概述与核心挑战在电力系统这个庞大而精密的“交响乐团”中，自动发电控制（AGC）系统扮演着指挥家的角色。它的核心任务是根据电网频率和联络线功率的微小波动，实时调整各发电机的出力，确保整个电网的频率稳定在50…...

编程新知 2026/5/25 14:04:36

Balena Etcher：跨平台系统镜像安全写入的技术实现

Balena Etcher：跨平台系统镜像安全写入的技术实现【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher 当你需要在不同操作系统之间部署系统镜像时&#x…...

编程新知 2026/5/25 13:23:17