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

javascrip页面交互

news 文章来源：https://blog.csdn.net/S_3440183297_/article/details/143893367 2025/5/11 1:52:59

元素的三大系列

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

docker 部署 kvm 图形化管理工具 WebVirtMgr

镜像构建官方最后一次更新已经是 2015年6月22日了，官方也没有 docker 镜像，这边选择咱们自己构建如果你的服务器有魔法，可以直接 git clone 一下 webvirtmgr 的包，没有的话，可以和我一样，提前从 github 上…...

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

【Unity How】Unity中如何实现物体的匀速往返移动

直接上代码 using UnityEngine;public class CubeBouncePingPong : MonoBehaviour {[Header("移动参数")][Tooltip("移动速度")]public float moveSpeed 2f; // 控制移动的速度[Tooltip("最大移动距离")]public float maxDistance 5f; // 最大…...

编程日记 2024/11/24 4:41:27

Block Successive Upper Bound Minimization Method（BSUM）算法

BSUM优化方法学习先验知识参考资料1 A Uniﬁed Convergence Analysis of Block Successive Minimization Methods for Nonsmooth OptimizationSUCCESSIVE UPPER-BOUND MINIMIZATION (SUM) 连续上限最小化算法THE BLOCK SUCCESSIVE UPPER-BOUND MINIMIZATION ALGORITHM 块连续上…...

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

力扣2388. 将表中的空值更改为前一个值

一、数据 2388. 将表中的空值更改为前一个值表: CoffeeShop ---------------------- | Column Name | Type | ---------------------- | id | int | | drink | varchar | ---------------------- id 是该表的主键（具有唯一值的列&#xf…...

编程日记 2024/11/24 4:34:07

【从零开始的LeetCode-算法】3233. 统计不是特殊数字的数字数量

给你两个正整数 l 和 r。对于任何数字 x，x 的所有正因数（除了 x 本身）被称为 x 的真因数。如果一个数字恰好仅有两个真因数，则称该数字为特殊数字。例如： 数字 4 是特殊数字，因为它的真因数为 1 和…...

编程日记 2024/11/24 4:33:04

Redis配置主从架构、集群架构模式 redis主从架构配置 redis主从配置 redis主从架构 redis集群配置

Redis配置主从架构、集群架构模式 redis主从架构配置 redis主从配置 redis主从架构 redis集群配置 1、主从模式1.1、主节点配置1.2、从节点配置1.3、测试 2、集群模式 1、主从模式 1.1、主节点配置 # 监听所有网络接口 bind 0.0.0.0# cluster-enabled表示为集群模式&#xff…...

编程日记 2024/11/24 4:32:02

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略完整参考论文（2）

5.2 问题一模型的建立与求解 5.2.1 分析发展情况为了更好地理解数据的变化趋势，利用matlab通过六个子图对宠物行业中的关键变量进行了可视化展示。图 1. 宠物数量变化展示了猫数量、狗数量和总宠物数量在 2019-2023 年间的变化趋势。结果显示：猫的数量呈逐年上升的趋…...

编程日记 2024/11/24 4:28:52

HTML实现扫雷游戏

前言： 游戏起源与发展扫雷游戏的雏形可追溯到 1973 年的 “方块（cube）” 游戏，后经改编出现了 “rlogic” 游戏，玩家需为指挥中心探出安全路线避开地雷。在此基础上，开发者汤姆・安德森编写出了扫雷游戏的…...

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

day03（单片机高级）RTOS

目录 RTOS(实时操作系统) 裸机开发模式轮询方式前后台（中断方式） 改进（前后台（中断））定时器裸机进一步优化裸机的其他问题 RTOS的概念什么是RTOS 为什么要使用 RTOS RTOS的应用场景 RTOS的…...

编程日记 2024/11/24 4:26:45

【mongodb】社区版8：改变配置bindip和授权

更改配置 sudo systemctl restart mongod (base) root@k8s-master-pfsrv:/home/zhangbin# sudo tail -n 20 /var/log/mongodb/mongod.log 日志感觉是成功了：{"t":{"$date":"2024-11-19T19:57:47.076+08:00"...

编程日记 2024/11/24 4:24:42