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

HTML文章翻页功能

news 来源：原创 2025/6/13 19:53:21

效果展示：

效果原理：

1、引入CDN

2、绘制文章翻页样式，以及自动分段

3、获取窗口宽高，计算出当前文章总分段，并实现分页

4、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 移动端适配 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入VUE CDN --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><!-- 引入el样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入el组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><!-- 引入VUE CDN ， 如果cdn不可用 建议下载cdn文件到本地调用<script src="./utils/vue@2.js"></script><link rel="stylesheet" href="./utils/elemnt.css"><script src="./utils/element.js"></script>--><title>html_文章翻页功能</title>
</head>
<style>#app{width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);overflow: hidden;}/** 1、窗口区设置屏幕区域大小 */section {box-sizing: border-box;width: 360px;height: 500px;border: 1px solid red;margin: 0 auto;background-color: #fff;padding: 20px 16px;position: relative;}/**2、 分页在窗口区域绝对定位 */.page-box {width: 100%;position: absolute;left: 0;bottom: 5px;display: flex;align-items: center;justify-content: center;z-index: 999;}.prev-btn {width: 24px;height: 24px;border-radius: 3px 3px 3px 3px;border: 1px solid;margin: 0 20px;text-align: center;}.next-btn {width: 24px;height: 24px;border-radius: 3px 3px 3px 3px;border: 1px solid;margin: 0 20px;text-align: center;}/** 3、 内容区域 宽高100% columns 实现分栏 columns  进行分段，column-gap 设置间距columns 列的宽度 控制列数设置transition 过度效果分页就是通过 transition 偏移实现
*/#article {width: 100%;columns: 1;column-gap: 20px;height: 100%;word-break: break-word;transition: .5s;}h3 {text-align: center;}
</style><body><div id="app"><div class="app-container home"><!-- 窗口区 --><section class="section"><!-- 文章内容区 --><article id="article"><div class="content"><h3>《中华人民共和国网络安全法》</h3><div class="content-p">第一章 总则第一条 为保障网络安全，维护网络空间主权和国家安全、社会公共利益，保护公民、法人和其他组织的合法权益，促进经济社会信息化健康发展，制定本法。第二条 在中华人民共和国境内建设、运营、维护和使用网络，以及网络安全的监督管理，适用本法。第三条国家坚持网络安全与信息化发展并重，遵循积极利用、科学发展、依法管理、确保安全的方针，推进网络基础设施建设和互联互通，鼓励网络技术创新和应用，支持培养网络安全人才，建立健全网络安全保障体系，提高网络安全保护能力。第四条 国家制定并不断完善网络安全战略，明确保障网络安全的基本要求和主要目标，提出重点领域的网络安全政策、工作任务和措施。第五条 国家采取措施，监测、防御、处置来源于中华人民共和国境内外的网络安全风险和威胁，保护关键信息基础设施免受攻击、侵入、干扰和破坏，依法惩治网络违法犯罪活动，维护网络空间安全和秩序。第六条 国家倡导诚实守信、健康文明的网络行为，推动传播社会主义核心价值观，采取措施提高全社会的网络安全意识和水平，形成全社会共同参与促进网络安全的良好环境。第七条 国家积极开展网络空间治理、网络技术研发和标准制定、打击网络违法犯罪等方面的国际交流与合作，推动构建和平、安全、开放、合作的网络空间，建立多边、民主、透明的网络治理体系。第八条国家网信部门负责统筹协调网络安全工作和相关监督管理工作。国务院电信主管部门、公安部门和其他有关机关依照本法和有关法律、行政法规的规定，在各自职责范围内负责网络安全保护和监督管理工作。第九条 网络运营者开展经营和服务活动，必须遵守法律、行政法规，尊重社会公德，遵守商业道德，诚实信用，履行网络安全保护义务，接受政府和社会的监督，承担社会责任。第十条建设、运营网络或者通过网络提供服务，应当依照法律、行政法规的规定和国家标准的强制性要求，采取技术措施和其他必要措施，保障网络安全、稳定运行，有效应对网络安全事件，防范网络违法犯罪活动，维护网络数据的完整性、保密性和可用性。第十一条 网络相关行业组织按照章程，加强行业自律，制定网络安全行为规范，指导会员加强网络安全保护，提高网络安全保护水平，促进行业健康发展。第十二条 国家保护公民、法人和其他组织依法使用网络的权利，促进网络接入普及，提升网络服务水平，为社会提供安全、便利的网络服务，保障网络信息依法有序自由流动。任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得危害网络安全，不得利用网络从事危害国家安全、荣誉和利益，煽动颠覆国家政权、推翻社会主义制度，煽动分裂国家、破坏国家统一，宣扬恐怖主义、极端主义，宣扬民族仇恨、民族歧视，传播暴力、淫秽色情信息，编造、传播虚假信息扰乱经济秩序和社会秩序，以及侵害他人名誉、隐私、知识产权和其他合法权益等活动。第十三条 国家支持研究开发有利于未成年人健康成长的网络产品和服务，依法惩治利用网络从事危害未成年人身心健康的活动，为未成年人提供安全、健康的网络环境。第十四条 任何个人和组织有权对危害网络安全的行为向网信、电信、公安等部门举报。收到举报的部门应当及时依法作出处理；不属于本部门职责的，应当及时移送有权处理的部门。有关部门应当对举报人的相关信息予以保密，保护举报人的合法权益。第二章 网络安全支持与促进第十五条国家建立和完善网络安全标准体系。国务院标准化行政主管部门和国务院其他有关部门根据各自的职责，组织制定并适时修订有关网络安全管理以及网络产品、服务和运行安全的国家标准、行业标准。国家支持企业、研究机构、高等学校、网络相关行业组织参与网络安全国家标准、行业标准的制定。第十六条国务院和省、自治区、直辖市人民政府应当统筹规划，加大投入，扶持重点网络安全技术产业和项目，支持网络安全技术的研究开发和应用，推广安全可信的网络产品和服务，保护网络技术知识产权，支持企业、研究机构和高等学校等参与国家网络安全技术创新项目。第十七条 国家推进网络安全社会化服务体系建设，鼓励有关企业、机构开展网络安全认证、检测和风险评估等安全服务。第十八条 国家鼓励开发网络数据安全保护和利用技术，促进公共数据资源开放，推动技术创新和经济社会发展。国家支持创新网络安全管理方式，运用网络新技术，提升网络安全保护水平。第十九条 各级人民政府及其有关部门应当组织开展经常性的网络安全宣传教育，并指导、督促有关单位做好网络安全宣传教育工作。大众传播媒介应当有针对性地面向社会进行网络安全宣传教育。</div></div></article><!-- 分页 --><div class="page-box"><div class="prev-btn" @click="changePage(0)"> 《 </div><span>{{ pageCurrent + 1 }}</span><div class="next-btn" @click="changePage(1)"> 》</div></div></section></div></div><script>/* 实例化vue */var app = new Vue({el: '#app',data: {screenWidth: 0,//内容区域宽度screenHeight: 0,//内容区域高度totalHeight: 0,//内容总长度pageCurrent: 0,//当前页数pageTotal: 0,//总页数},mounted() {this.getArticleInit()},methods: {/** 1、初始化时加载屏幕宽高，内容总长度 */getArticleInit() {// （1）获取 article 元素宽高作为可视宽高const aEvent = document.querySelector('#article') //获取元素可视区域const aWidth = aEvent.clientWidth + 20 // 获取元素宽度 + 间距宽度const aHeight = aEvent.clientHeight // 获取元素高度console.log('--可视内容宽高--', aWidth, aHeight)//（2）获取 article 元素 下的div 获取全文高度，用于实现分页const ctEvent = document.querySelector('.content') //获取元素可视区域const ctHeight = ctEvent.clientHeight // 获取文章内容总高度const ctPage = Math.ceil(ctHeight / aHeight) //向上取整，获取最大页数console.log('--内容总长与分页数--', ctHeight, ctPage)this.screenWidth = aWidththis.screenHeight = aHeightthis.totalHeight = ctHeightthis.pageTotal = ctPage/*** clientWidth和clientHeight* clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度。* clientHeight=height+顶部padding+底部padding-水平滚动条宽度。* * offsetWidth和offsetHeight* offsetWidth=width(样式中设置的)+左右padding+左右borderoffsetHeight=height(样式中设置的)+上下padding+上下border*/},/** 2、点击分页时 元素通过transform-translate 偏移  */changePage(type = 0) {const aEvent = document.querySelector('#article') //获取元素let page = this.pageCurrentlet total = this.pageTotallet aWidth = this.screenWidth/** (1) 下一页 -- 小于总页数才可下一页 */if (type) {if (page >= total - 1) returnpage++let tempWidth = aWidth * pageaEvent.style.transform = `translateX(-${tempWidth}px) `this.pageCurrent = pagereturn}/** (1) 上一页 -- 当前页数大于1才行 */if (page > 0) {page--let tempWidth = aWidth * pageaEvent.style.transform = `translateX(-${tempWidth}px) `this.pageCurrent = page}}}})</script>
</body></html>

相关文章：

HTML文章翻页功能

效果展示&#xff1a; 效果原理&#xff1a; 1、引入CDN 2、绘制文章翻页样式&#xff0c;以及自动分段 3、获取窗口宽高&#xff0c;计算出当前文章总分段&#xff0c;并实现分页 4、完整代码 <!DOCTYPE html> <html><head><meta charset"utf-8&qu…...

编程日记 2025/6/3 19:57:57

JAVA安全编码规范

1. 数据校验 对外部输入进行校验入参的合法性&#xff0c; 防止内存越界&#xff0c;命令注入&#xff0c;SQL注入&#xff0c;格式化字符串漏洞 校验长度&#xff0c;范围&#xff0c;输入校验采用白名单形式 校验前做归一化处理&#xff0c;使用java.text.Normalizer的n…...

编程日记 2025/6/4 6:33:21

OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码，QOpenGL渲染yuv420p或nv12视频（附源码）

运行效果 工程说明 源码 vertex.glsl...

编程日记 2025/5/30 22:32:01

爬虫逆向学习(十五)：Akamai 3.0反爬分析与sensor-data算法逆向经验

此分享只用于学习用途&#xff0c;不作商业用途&#xff0c;若有冒犯&#xff0c;请联系处理 Akamai 3.0反爬分析与sensor-data算法逆向经验 Akamai开始正题前须知站点信息接口分析反爬点反爬点定位_abck定位结果 逆向前准备工作sensor_data生成位置本地替换文件 请求体sensor…...

编程日记 2025/6/1 10:11:59

java项目启动时，执行某方法

1. J2EE项目 在Servlet类中重写init()方法&#xff0c;这个方法会在Servlet实例化时调用&#xff0c;即项目启动时调用。 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;public class MyServlet extends HttpServlet {Overridepublic void …...

编程日记 2025/6/4 6:32:18

学会使用开源软件jclasslib 字节码文件的组成 详解

应用场景 1 应用场景 2 学习路线 以正确的姿势打开文件 字节码文件的组成 玩转字节码常用工具 以正确的姿势打开文件 开源软件 jclasslib github 地址 https://github.com/ingokegel/jclasslib 工具使用 字节码文件的组成 基本信息 常量池 字段 方法 属性 详解 魔数 主副版…...

编程日记 2025/6/4 6:32:49

Flask表单处理与验证

Flask是一个轻量级的Python框架&#xff0c;它通过扩展库提供了对表单处理与验证的支持。WTForms是一个流行的Flask扩展库&#xff0c;用于创建和验证Web表单。它提供了一种声明式的方法来定义表单结构和验证逻辑&#xff0c;使得表单处理更为简洁和优雅。下面&#xff0c;我们…...

编程日记 2025/6/2 21:34:31

如何通俗易懂的理解 html js css

HTML、CSS 和 JavaScript 是构建网页的三大核心技术。为了通俗易懂地理解它们&#xff0c;我们可以用一个简单的比喻&#xff1a;**盖房子**。 --- ### 1. **HTML&#xff1a;房子的结构** HTML&#xff08;HyperText Markup Language&#xff09;就像房子的**骨架**。它定义…...

编程日记 2025/6/4 6:32:34

信凯科技业绩波动明显：毛利率远弱行业，资产负债率偏高

《港湾商业观察》施子夫 1月8日&#xff0c;深交所官网显示&#xff0c;浙江信凯科技集团股份有限公司&#xff08;以下简称“信凯科技”&#xff09;主板IPO提交注册。 自2022年递交上市申请&#xff0c;信凯科技的IPO之路已走过两年光景&#xff0c;尽管提交注册&#xff0…...

编程日记 2025/6/4 6:33:05

蓝牙BT04-A的使用与相关AT指令

一、AT指令没有返回的问题及解决方案 检查指令格式&#xff1a; 确认指令格式是否正确&#xff0c;包括特定的命令和结尾的回车换行符&#xff08;n&#xff09;。 检查TX/RX连接&#xff1a; 确认TX&#xff08;发送&#xff09;和RX&#xff08;接收&#xff09;线是否连接正…...

编程日记 2025/6/3 11:07:20

新手如何练习SQL?|掌握

对于新手想要练习SQL语句&#xff0c;可以从以下几个方面入手&#xff1a; 1. 建立理论基础 首先深入理解数据库的核心组件&#xff0c;包括数据库本身、其内部的各个表、表中的字段及其对应的数据类型&#xff08;如字符串、整型、日期等&#xff09;&#xff0c;以及数据库…...

编程日记 2025/6/3 11:07:01

JavaScript宝典下

小哆啦闭关修炼已久&#xff0c;潜心攻读专业秘技&#xff0c;方才下山考研本欲大展宏图&#xff0c;怎奈山河虽壮志难酬&#xff0c;终是觉察考研无望。思来想去&#xff0c;不若弃考研之念&#xff0c;重拾敲代码之道&#xff0c;复盘前端奇术&#xff0c;以备闯荡职场江湖。…...

编程日记 2025/6/3 11:09:28

浅谈云计算12 | KVM虚拟化技术

KVM虚拟化技术 一、KVM虚拟化技术基础1.1 KVM虚拟化技术简介1.2 KVM虚拟化技术架构1.2.1 KVM内核模块1.2.2 用户空间工具&#xff08;QEMU、Libvirt等&#xff09; 二、KVM虚拟化技术原理2.1 硬件辅助虚拟化2.2 VMCS结构与工作机制 三、KVM虚拟化技术面临的挑战与应对策略3.1 性…...

编程日记 2025/6/3 11:08:40

Spring Boot 动态表操作服务实现

Spring Boot 动态表操作服务实现 Spring Boot 动态表操作服务实现1. 环境配置2. JdbcTemplate 的使用2.1 创建动态表2.2 动态添加字段2.3 动态删除字段2.4 动态修改字段类型2.5 删除表的方法实现 3. 小结3.1 可能的优化 Spring Boot 动态表操作服务实现 在现代的应用开发中&am…...

编程日记 2025/6/3 11:09:12

62_Redis服务器集群优化

Redis集群虽然具备高可用特性，且能实现自动故障恢复，但是如果使用不当，也会存在一些问题，总结如下。 集群完整性问题集群带宽问题数据倾斜问题客户端性能问题命令的集群兼容性问题Lua和事务问题1.集群完整性问题 在 Redis 集群的默认配置下，当节点检测到存在至少一个哈希…...

编程日记 2025/6/3 7:50:13

晨辉面试抽签和评分管理系统之九：随机编排考生的分组(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统&#xff08;下载地址:www.chenhuisoft.cn&#xff09;是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…...

编程日记 2025/6/2 20:37:32

Linux Top 命令 load average 指标解读

前言 作为平台开发的同学&#xff0c;维护平台稳定性是我们最基本的工作职责&#xff0c;下面主要介绍下top 命令里 &#xff0c;load average 这个指标如何去衡量机器负载程度。 概念介绍 load average 是系统在过去 1 分钟、5 分钟、15 分钟 的平均负载&#xff0c;它表示运…...

编程日记 2025/6/3 11:08:56

Nacos: 一个动态服务发现与配置管理平台

Nacos: 一个动态服务发现与配置管理平台 引言 在微服务架构日益普及的今天&#xff0c;服务之间的调用和配置管理变得越来越复杂。为了简化这一过程并提高开发效率&#xff0c;阿里巴巴推出了Nacos——一个易于使用的动态服务发现、配置管理和服务管理平台。 Nacos是什么&am…...

编程日记 2025/6/3 11:07:53

SpringBoot + 事务钩子函数

一、案例背景 拿支付系统相关的业务来举例。在支付系统中&#xff0c;我们需要记录每个账户的资金流水&#xff08;记录用户A因为哪个操作扣了钱&#xff0c;因为哪个操作加了钱&#xff09;&#xff0c;这样我们才能对每个账户的账做到心中有数&#xff0c;对于支付系统而言&…...

编程日记 2025/6/3 11:08:24

OpenCV相机标定与3D重建(56)估计物体姿态（即旋转和平移）的函数solvePnPRansac()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 使用RANSAC方案从3D-2D点对应关系中找到物体的姿态。 cv::solvePnPRansac 是 OpenCV 中用于估计物体姿态&#xff08;即旋转和平移&#xff09;的…...

编程日记 2025/6/4 4:59:17

【JVM中的三色标记法是什么？】

JVM中的三色标记法是什么？ 一、基本概念二、标记过程三、优势与问题四、漏标与多标的解决方案三色标记法（Tri-color Marking Algorithm）是Java虚拟机（JVM）中一种用于追踪对象存活状态的垃圾回收算法。 它基于William D. Hana和Mark S. McCulleghan在1976年提出的两色标记法…...

编程日记 2025/6/4 4:59:01

从0开始学习搭网站第二天

前言&#xff1a;今天比较惭愧&#xff0c;中午打铲吃了一把&#xff0c;看着也到钻二了&#xff0c;干脆顺手把这个赛季的大师上了&#xff0c;于是乎一直到网上才开始工作&#xff0c;同样&#xff0c;今天的学习内容大多来自mdn社区mdn 目录 怎么把文件上传到web服务器采用S…...

编程日记 2025/6/4 5:00:52

43.Textbox的数据绑定 C#例子 WPF例子

固定最简步骤&#xff0c;包括 XAML&#xff1a; 题头里引入命名空间 标题下面引入类 box和block绑定属性 C#&#xff1a; 通知的类&#xff0c;及对应固定的任务 引入字段 引入属性 属性双触发&#xff0c;其中一个更新block的属性 block>指向box的属性 从Textbo…...

编程日记 2025/6/4 5:00:05

钉钉实现第三方登录示例（重复回调问题解析）

钉钉作为专门为企业打造的沟通协助平台&#xff0c;包含的功能很多&#xff0c;考勤打卡&#xff0c;审批&#xff0c;日记&#xff0c;钉盘&#xff0c;钉邮等。基本满足了一些中小企业的大部分工作需求。因此对接钉钉的一些功能模块业务需求在开发中也是比较常见的。钉钉的开…...

编程日记 2025/6/4 5:00:36

Vue2+OpenLayers添加/删除点、点击事件功能实现（提供Gitee源码）

目录 一、案例截图 二、安装OpenLayers库 三、安装Element-UI 四、代码实现 4.1、添加一个点 4.2、删除所有点 4.3、根据经纬度删除点 4.4、给点添加点击事件 4.5、完整代码 五、Gitee源码 一、案例截图 可以新增/删除标记点&#xff0c;点击标记点可以获取到当前标…...

编程日记 2025/6/1 17:17:18

算法妙妙屋-------2..回溯的奇妙律动

回溯算法是一种用于系统性地搜索和解决问题的算法&#xff0c;它以深度优先搜索&#xff08;DFS&#xff09;为基础&#xff0c;用来探索所有可能的解决方案。通过递归地尝试候选解并在必要时回退&#xff08;即“回溯”&#xff09;&#xff0c;它能够高效地解决许多涉及组合、…...

编程日记 2025/6/4 4:59:49

pytest-instafail：让测试失败信息即时反馈

pytest-instafail&#xff1a;让测试失败信息即时反馈 前言一、简介二、优势三、安装与使用3.1 未安装时运行情况3.2 安装3.3 已安装时运行情况3.3 pytest.ini 配置选项 四、对比 总结 前言 当测试用例数量庞大时&#xff0c;定位测试失败的原因往往耗时费力。此时&#xff0c;…...

编程日记 2025/6/4 5:00:21

K8S--配置存活、就绪和启动探针

目录 1 本人基础环境2 目的3 存活、就绪和启动探针介绍3.1 存活探针3.2 就绪探针3.3 启动探针 4 探针使用场景4.1 存活探针4.2 就绪探针4.3 启动探针 5 配置存活、就绪和启动探针5.1 定义存活探针5.2 定义一个存活态 HTTP 请求接口5.3 定义 TCP 的就绪探针、存活探测5.4 定义 g…...

编程日记 2025/6/4 4:59:33

solidity基础 -- 枚举

在智能合约开发领域&#xff0c;Solidity语言因其简洁高效而被广泛使用。其中&#xff0c;枚举&#xff08;enum&#xff09;作为一种特殊的数据类型&#xff0c;为合约的状态管理提供了极大的便利。本文将通过一个具体的Solidity合约示例&#xff0c;深入探讨枚举的定义、使用…...

编程日记 2025/6/3 10:41:06

重回C语言之老兵重装上阵（六）枚举

1. 什么是枚举 (enum)&#xff1f; 枚举&#xff08;enum&#xff09;是 C 语言中的一种数据类型&#xff0c;用于定义一组具名的整数常量。它可以使代码更加可读&#xff0c;帮助程序员更容易理解程序中的常量值。通过枚举&#xff0c;程序员可以使用有意义的名称来代替数字&…...

编程日记 2025/6/4 7:44:33

python+playwright自动化测试(一)：安装及简单使用，截图录屏

目录 基本使用 浏览器调用 启用浏览器 创建窗口对象 访问URL 页面的刷新、返回、前进 关闭 截图、录屏、保存pdf 截图 录屏 保存为pdf 设置窗口大小 调试模式 手机模式及new_context的更多参数 手机模式 new_context的其他参数 设置语言和时区 设置和修改位置…...

编程日记 2025/6/4 7:44:17

Mysql--架构篇--体系结构（连接层，SQL层，存储引擎层，文件存储层）

MySQL是一种广泛使用的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;其体系结构设计旨在提供高效的数据存储、查询处理和事务管理。MySQL的体系结构可以分为多个层次&#xff0c;每个层次负责不同的功能模块。 MySQL的体系结构主要由以下几个部分组成&#…...

编程日记 2025/5/30 5:44:58

git merge 压缩提交

在 Git 中&#xff0c;执行 git merge 时可以通过一些操作来“压缩”提交&#xff0c;通常是指将合并过程中的多个提交压缩成一个单一的提交。这可以通过使用 --squash 选项来完成&#xff0c;或者在合并后进行交互式 rebase。以下是两种常见的方法&#xff1a; 方法 1&#x…...

编程日记 2025/6/4 7:45:39

Python脚本自动发送电子邮件

要编写一个Python脚本来自动发送电子邮件&#xff0c;你可以使用smtplib库来处理SMTP协议&#xff0c;以及email库来构建邮件内容。 安装必要的库 通常情况下&#xff0c;smtplib和email库是Python标准库的一部分&#xff0c;因此不需要额外安装。如果你使用的是较旧的Python版…...

编程日记 2025/6/4 7:46:10

uniapp中rpx和upx的区别

在 UniApp 中&#xff0c;rpx 和 upx 是两种不同的单位&#xff0c;它们的主要区别在于适用的场景和计算方式。 ### rpx&#xff08;Responsive Pixel&#xff09; - **适用场景**&#xff1a;rpx 是一种响应式单位&#xff0c;主要用于小程序和移动端的布局。 - **计算方式**…...

编程日记 2025/6/4 7:44:49

CentOS 9 Stream 中查看 Python 版本并升级 Python

CentOS 9 Stream 中查看 Python 版本并升级 Python 1. 查看当前 Python 版本2. 升级 Python 版本&#xff08;1&#xff09;安装开发工具&#xff08;2&#xff09;安装必要的依赖包&#xff08;3&#xff09;下载和安装新版本的 Python&#xff08;4&#xff09;验证安装 3. …...

编程日记 2025/6/4 0:09:05

可以用于分割字符串的方法（python）

一、str.split(sep,maxsplit)函数&#xff08;返回列表&#xff09; sep&#xff1a;分隔符 maxsplit&#xff1a;分割次数 a"Hello world" list1a.split(" ",1) print(list1) 结果&#xff1a; [Hello, world] 二、str.rsplit(sep,maxsplit)函数&…...

编程日记 2025/6/4 7:45:55

【Vue】全局/局部组件使用流程(Vue2为例)

全局组件和局部组件区别 如何使用 全局组件&#xff1a;全局注册后&#xff0c;可以在任意页面中直接使用。局部组件&#xff1a;在页面中需要先导入子组件路径&#xff0c;注册组件才能使用。 适用场景 全局组件&#xff1a;适用于高频使用的组件&#xff0c;如导航栏、业…...

编程日记 2025/6/4 7:45:07

virtual box虚拟机误删Python3.6后导致UBUNTU18.04开机无UI界面（进不了desktop）的解决方法

最近在解决一个python引起的问题的时候&#xff0c;作者心一狠&#xff0c;删了系统自带的python3.6&#xff0c; 顺便还删了python3。导致重启后ubuntu的virtual box虚拟机无法看到UI登录界面&#xff0c;只给我了孤零零的命令行。装了很多东西不可能重装&#xff0c;无奈只能…...

编程日记 2025/6/4 0:09:08

虚拟线程JDK与Spring Core Reactor

两种虚拟线程对比&#xff1a;JDK vs. Spring Core Reactor性能对比 1、基于 JDK 的虚拟线程实现&#xff1a; 摘自实际代码&#xff1a; public static void withFlatMapUsingJDK() { ... var virtualThreadExecutor Executors.newThreadPerTaskExecutor( Thread .ofVirtual…...

编程日记 2025/6/2 21:55:57

纯 Python、Django、FastAPI、Flask、Pyramid、Jupyter、dbt 解析和差异分析

一、纯 Python 1.1 基础概念 Python 是一种高级、通用、解释型的编程语言&#xff0c;以其简洁易读的语法和丰富的标准库而闻名。“纯 Python” 在这里指的是不依赖特定的 Web 框架或数据分析工具&#xff0c;仅使用 Python 原生的功能和标准库来开发应用程序或执行任务。 1.…...

编程日记 2025/6/4 7:22:10

C++ NULL和nullptr

NULL实际是一个宏&#xff0c;在传统的C头文件(stddef.h)中&#xff0c;可以看到如下代码: #ifndef NULL #ifdef __cplusplus #define NULL 0 #else #define NULL ((void *)0) #endif #endif 如上是条件编译的宏定义 确保在不同编程环境下正确处理NULL的定义 C中NULL可能被定义…...

编程日记 2025/5/30 10:54:40

算法日记1：洛谷p2678跳石头(二分答案)

1、题目 二、题解&#xff1a; 2.1解题思路: 1.题目要求求出最小值最大&#xff0c;明显的二分答案题目&#xff0c;所以我们可以二分可以跳跃距离int l-1,rL1; 2.此时我们思考lmid和rmid的处理,当我们的check(mid)为true时候 表明我们此时的mid是符合要求的&#xff0c; 那么…...

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

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析 目录 PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析1. 引言2. PID控制器的基本概念2.1 PID控制器的定义2.2 PID控制器的核心思想2.3 PID控制器的应用领域 3. PID控…...

编程日记 2025/6/4 1:50:11

Vue中nextTick实现原理

源码实现思路&#xff08;面试高分回答&#xff09; 面试官问我 Vue 的 nextTick 原理是怎么实现的&#xff0c;我这样回答&#xff1a; 在调用 this.$nextTick(cb) 之前&#xff1a; 存在一个 callbacks 数组&#xff0c;用于存放所有的 cb 回调函数。存在一个 flushCallbac…...

编程日记 2025/6/3 7:28:16

【MATLAB】subplot如何增加title

在 Matlab 中&#xff0c;使用 subplot 函数将图形窗口划分为多个子图&#xff0c;并使用 title 函数为每个子图添加标题。以下是一个示例&#xff1a; matlab % 生成示例数据 x 0:0.1:10; y1 sin(x); y2 cos(x); % 创建一个 2 行 1 列的子图布局&#xff0c;并选…...

编程日记 2025/6/2 4:32:53

vue3+ts的＜img :src=““ ＞写法

vue3ts的<img :src"" >写法<img :src"datasetImage" alt"数据分布示意图" /><script setup lang"ts">const datasetImage ref();datasetImage.value new URL(../../../assets/images/login-background.jpg, impo…...

编程日记 2025/6/3 4:01:37

Vue+Echarts+百度地图 实现 路径规划

实现功能: 通过选择 相关调拨&#xff0c;系统自动规划 路径&#xff0c;并且以地图的形式呈现最佳路径 技术难点: 1. vue 结合使用 echarts 2.echarts 在 vue嵌入百度地图&#xff0c;并且做出路径 曲线 最终结果:...

编程日记 2025/6/2 21:56:13

uniapp 小程序 textarea 层级穿透，聚焦光标位置错误怎么办？

前言 在开发微信小程序时&#xff0c;使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时&#xff0c;就遇到了两个非常令人头疼的问题&#xff1a; 层级穿透&#xff1a;由于 textarea 是原生组件&#xff0c;任何元素都无法遮盖住它。当其…...

编程日记 2025/6/2 21:56:29

IGP协议的双点双向注入（路由引入）

一、拓扑环境 二、单向注入 以上拓扑为例&#xff0c;单点注入存在路由回包问题 在AR5上注入直连路由 55.5.5.5 需求&#xff1a;AR1上的10.1.1.1 需访问AR5上的55.5.5.5 1、在AR2和AR3上查看注入的55.5.5.5的路由信息 2、现在边界设备以学习到目的网段的路由信息&#xff0…...

编程日记 2025/5/30 5:47:05