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

javascrip页面交互

news 2026/4/1 20:51:06

元素的三大系列

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

如何三步搞定iOS微信聊天记录完整导出：隐私保护与数据备份终极指南

如何三步搞定iOS微信聊天记录完整导出：隐私保护与数据备份终极指南【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 还在为无法永久保存重要微信对话而烦恼吗&…...

编程新知 2026/4/1 20:37:58

ESP8266天气时钟DIY全攻略：从零搭建到个性化定制

1. 硬件准备与成本控制作为一个玩了多年智能硬件的爱好者，我强烈推荐从ESP8266开始入门物联网项目。这款芯片的价格实在太香了，9块钱就能买到NodeMCU开发板，性能却足够应付大多数DIY场景。我去年做过统计，用ESP8266搭建的天气时钟…...

编程新知 2026/4/1 20:03:36

告别重复造轮子：用快马平台高效生成ibbot开发脚手架与核心模块

今天想和大家分享一个提升ibbot开发效率的实用技巧。作为一个经常需要开发对话机器人的程序员，我发现每次从零开始搭建项目结构、编写基础模块特别耗时。最近尝试用InsCode(快马)平台生成项目脚手架，效果出乎意料的好。项目结构自动生成平台能根据自然…...

编程新知 2026/4/1 20:01:36

MSSQL03:SQLServer数据库中的高级语法及其技巧

目录一、日期相关 1.查询当前日期相关数据 2.查询特定时间区间 3.时间加减法 （1）加法 （2）减法 4.格式化日期二、数据类型转化 1.Int -> Decimal 2.DateTime->OtherTime 3.DateTime->string 三、条件判断相关…...

编程新知 2026/4/1 19:23:07

WPF进阶：Canvas动态图形绘制与交互实现

1. Canvas动态图形绘制基础 WPF中的Canvas就像一块无限延伸的画布，我们可以在这块画布上自由地绘制各种图形元素。与静态绘制不同，动态绘制的魅力在于图形能够根据用户操作实时变化。我刚开始接触Canvas时，最让我兴奋的就是看到鼠标移动时能实…...

编程新知 2026/4/1 18:44:43

Flutter状态管理实战：ChangeNotifier与Provider的完美搭配（附完整代码）

Flutter状态管理实战：ChangeNotifier与Provider的完美搭配在Flutter开发中，状态管理一直是构建复杂应用的核心挑战。当UI需要根据数据变化动态更新时，如何高效、优雅地管理状态流转，直接决定了应用的性能和可维护性。本文将深入…...

编程新知 2026/4/1 17:24:51

XTDrone仿真环境配置踩坑实录：我是如何解决Gazebo插件冲突和MAVROS地理库安装失败的

XTDrone仿真环境配置踩坑实录：Gazebo插件冲突与MAVROS地理库安装的终极解决方案从崩溃到重生的仿真环境搭建之旅上周三凌晨3点，我的终端窗口里又一次弹出那个熟悉的红色错误提示——"Gazebo plugin not found"。这已经是连续第三个通宵和X…...

编程新知 2026/4/1 17:05:39

视频PPT提取终极指南：3步从视频中智能提取演示文稿

视频PPT提取终极指南：3步从视频中智能提取演示文稿【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 你是否曾经需要从视频中提取PPT内容，却苦于手动截图效率低…...

编程新知 2026/4/1 16:32:50

用ZYNQ PS-SPI给Flash测个速：华邦W25Q80在25MHz时钟下的真实读写性能报告

ZYNQ PS-SPI Flash性能深度评测：华邦W25Q80在25MHz时钟下的极限挖掘当我们需要在嵌入式系统中选择一款Flash存储器时，数据手册上的理论参数往往无法反映真实应用场景下的性能表现。本文将基于Xilinx ZYNQ平台的PS-SPI接口，对华邦W25Q80 Flas…...

编程新知 2026/4/1 16:20:41

【计算机架构】RISC-V：开源精简指令集如何重塑未来芯片设计

1. RISC-V：开源指令集的革命性突破我第一次接触RISC-V是在2014年，当时这个开源指令集还只是学术界的一个研究项目。谁能想到短短几年后，它已经成为改变芯片设计行业的颠覆性力量。与ARM、x86等传统商业架构不同，RISC-V最吸引我的…...

编程新知 2026/4/1 16:02:33