- 博客(579)
- 资源 (13)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 【JavaScript】二十八、放大镜与遮罩层代码实现与思路
如下，有小、中、大三个盒子：需求：实现鼠标经过对应小盒子，左侧中等盒子显示对应中等图片思路：2、功能：大盒子的显示实现鼠标经过中盒子，右侧会显示放大镜效果的大盒子，这里先控制大盒子的显示和隐藏，放大效果最后再实现：用到鼠标经过和离开，鼠标经过中盒子，大盒子 利用 display 来显示和隐藏鼠标离开不会立马消失，而是有200ms的延时，用户体验更好，所以尽量使用定时器做个延时 setTimeout3、功能：黑色遮罩层layer的移动与放大镜🔍让黑色盒子的移动的核心思想：不断把鼠标在中等盒子内的坐
2025-05-07 20:16:39
325
原创 【JavaScript】二十七、用户注册、登陆、登出
需求：验证用户输入的用户名是不是6～10位的字母或者数字，这个第一个想到的可能是失焦事件，但这个也不完美，比如点击输入框，啥也不输，焦点离开输入框，就会出现不合法提示，这里改用change事件。如果本地存储没有数据，则复原为默认的结构，最后，登出时，删除本地存储的用户名，并重新渲染页面，回到请先登陆的文字。当失焦，并且值发生了变化时，change事件触发，注意，不是你在输入框里不停的输入值，就不断的触发，还要失焦。需求：用户点击之后，显示 05秒后重新获取，时间到了，自动改为重新获取。
2025-04-27 20:55:41
916
原创 【JavaScript】二十六、正则表达式
const 变量名 = /表达式/// 定义规则，不用加引号，即使是中文const regObj = /文本/
2025-04-23 19:03:44
885
原创 【JavaScript】二十五、本地存储LocalStorage
注意，下面例子中，map传参的函数最后有return，当然，你也可以不return，也就是说，只做了一个遍历操作，但一般不推荐map遍历，因为map设计出来就是处理数据并返回一个新数组map，即映射，和forEach不同的是，map有返回值。
2025-04-22 06:30:00
746
原创 【JavaScript】二十四、JS的执行机制事件循环 + location + navigator + history
而之前DOM中常用的document，只不过是window的一个属性，因此，也可以看出BOM > DOM，DOM是BOM的一个子集。JS语言本身是单线程的，同一个时间只能做一件事，因为其使命是操作DOM，从上而下很合理，但如果有部分JS代码执行很慢，就会造成页面渲染不连贯，因此，如上，代码执行的时候，先执行 JS执行栈中的同步任务，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务（用于刷新当前页面，传入参数true时，表示强制刷新，类似Ctrl + F5，不传，就是普通刷新。
2025-04-17 21:03:21
1200
原创 【JavaScript】二十三、M端事件 + 轮播图Swiper插件
移动端有一个独有的事件：触屏事件 touch(也称触摸事件)，Android 和 IOS 都有，touch 对象代表一个触摸点。不要第一反应就是纯DOM操作，借助一个数组，增删改查都基于数组，且新增或者删除后，会触发重新渲染，document.createElement创建元素对象并插入到对应的位置，完成渲染。删除数据时，想要确定从数组中删除哪一条，现有的代码无法实现，考虑加一个自定义属性，data-id，其值等于数据在数组中的索引。需求：点击录入，新增一条数据，点击操作，删除对应的数据。
2025-04-16 21:17:41
811
原创 【JavaScript】二十二、通过关系查找DOM节点、新增、删除
按之前的逻辑，要querySelector分别查找关闭 x 的Dom对象，以及其父元素div，但现在只需获取一次 x 元素，然后直接关闭 x 元素的父元素。删除节点和隐藏节点(display:none) 的区别：隐藏节点还是存在的，但是删除，则从html中删除节点。除了新创建节点，也可以复制一个原有的节点，然后再把复制的节点放入到指定的元素内部。点开第一个li，发现亲儿子元素的内容也获取到了，但不是孙子元素本身！这里相比之前的querySelector，练习：关闭二维码案例。
2025-04-15 21:17:22
682
原创 【JavaScript】二十一、日期对象
这个倒计时的实现，用时分秒分别去减，很繁琐，用时间戳来实现：目标截止时间的时间戳 - 当前时间戳，再转为时分秒。需求：将当前时间以:YYYY-MM-DD HH:mm 形式显示在页面并实时刷新。需求：计算到下课还有多少时间。
2025-04-15 19:46:12
288
原创 【JavaScript】十八、页面加载事件和页面滚动事件
script标签在html中的位置一般在</body>标签上方，这是因为代码从上往下执行，在html元素都没加载的情况下，JS去获取DOM对象，会获取不到，如下，script标签提前，button对象就获取不到。如下，在上面div的例子中，滚动条向下拉，文字向上走（绿色代表div盒子，红色代表文字内容），紫色线所示长度，就是被卷去的长度，即scrollTop。当然，一般获取的是页面滚动的距离，获取整个html页面，不是document.html，而是document.documentElement。
2025-04-10 22:41:29
1102
原创 【JavaScript】十七、事件委托（冒泡阶段的利用）
以送快递为例，某班有20名同学，每人有一个快递，快递员可以一个个送，需要送40次，很繁琐，换个方式，快递员直接把20个快递都送到这个班的班主任（上下级关系）处，等同学自己去取，这就是委托。，之前给ul下的li的a标签元素遍历绑定事件，现在用事件委托，则给其父元素绑定，注意，相比前面tab栏切换的案例，tab栏对应的数据，没有了下标索引，这里使用了自定义属性id。实现点击无序列表的每一项，都弹出一个弹窗，首先可以通过遍历li对象，绑定事件来实现。事件委托，体现了事件冒泡的优点。
2025-04-10 19:31:37
641
原创 【JavaScript】十六、事件捕获和事件冒泡
此时，点击红色的儿子元素部分，因为红色部分也属于绿色的父亲div，更属于整个document，所以三个点击事件都触发，但因为现在addEventListener是true，所以，是事件捕获，从document到父div再到子div，因此，效果是：弹窗依次从父元素到子元素。对比给div绑定一个点击事件，当事件被触发时：会经历两个阶段，分别是捕获阶段、冒泡阶段，事件流则指的是事件完整执行过程中的这个流动路径。事件冒泡🫧：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
2025-04-08 20:04:38
1149
原创 配置文件拉取的安全问题 + 索引建立影响评估
处理了一个安全工单，业务系统拉取外部配置时，未开启权限校验，比如SpringBoot项目一部分配置放在配置中心Nacos，而通过接口拉取Nacos配置时，不需要权限校验，这样会导致知道项目在配置中心appid的人，可以通过接口随意拉取和更改配置。关键点：安全性 + 环境变量的使用。
2025-04-08 16:05:18
316
原创 【JavaScript】十五、事件对象与环境对象
直接调用函数，其实相当于是 window.函数，所以 this 指代 window，而下面监听点击事件，则是button对象在调用，所以this就是这个DOM对象，因此，像实现点击按钮后按钮变色。借助这个选择器，获取小复选框的个数，和已被checked的小复选框的个数，相等则表示全选，否则，更新全选框的checked为false。实现思路：获取所有的a标签，遍历绑定鼠标移入事件，数据的切换，通过样式控制显示和隐藏。需求1：大按钮控制所有小按钮，用户点击全选，则下面复选框全部选择，取消全选则全部取消。
2025-04-07 20:29:41
708
原创 【JavaScript】十三、事件监听与事件类型
前者做为早期语法，会产生覆盖，如下，绑定两次点击时间，只有第二个生效，也就是说只有一个22的弹窗，这种类似赋值覆盖，let num =1;但DOM L1的事件监听语法，则不会覆盖，下面这么写，会有11和22两个弹窗。让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做为响应。模拟小米搜索框，搜索框获得焦点时，显示可能搜索词汇且搜索框高亮。效果：按下Enter并松开，算两个事件，一个按下 + 一个弹起。需求：点击关闭之后，顶部关闭。keydown：键盘按下触发。keyup：键盘抬起触发。
2025-04-02 23:19:28
733
原创 【JavaScript】十二、定时器
实现方式：在上一篇的基础上稍微改下，不再是随机一条数据，而是依次轮循每条数据，一秒钟执行一次，达到一秒钟一切换的效果。：如果不再需要定时器，务必使用 clearInterval 或 clearTimeout 清除，以避免内存泄漏。但这样写复杂了，改个实现：先删除以前的active，再让当前的li标签添加active样式。需求：每隔一秒钟自动切换一个图片。需求：按钮60秒之后才可以使用。：每个一段时间就调用这个函数。
2025-03-30 22:40:41
906
原创 【JavaScript】十一、DOM对象的获取和修改
-- 自定义属性data-id --><script>// 获取自定义属性</script>
2025-03-30 17:54:56
1160
原创 【JavaScript】十、DOM树和DOM对象
看下图，const要求变量里存的值不能发生更改，但对引用数据类型来说，变量存的值是内存地址，往数组添加新元素或者更改对象属性值，其内存地址并没有变，这一点，和Java中的final关键字修饰一个对象一样，不能再指向一个新的内存地址，但对象的属性值仍然可以随意修改。DOM，Document Object Model，文档对象模型，是用来操作HTML或者XML的API，直白说，DOM树，指将 HTML 文档以树状结构直观的表现出来，它直观的。以下，let可以换const，因为变量中存的是内存地址。
2025-03-30 01:42:51
778
原创 【JavaScript】九、JS基础练习
一般来说，目前没有学dom操作，打印下面这个表格，都是先写出死的html，再把html分块剪切到script标签中，使用document.write来输出html标签。VsCode中，Alt + ⬇️ 或者option + ⬇️，把一行代码直接向下移动，不用剪切后复制。这里本质是遍历数组 + 获取对象的属性值，那么查对象的两种语法都可以用，不必硬套for in。需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字。需求：定义多个对象，存数组，遍历数据渲染生成表格。
2025-03-29 21:12:46
618
原创 【JavaScript】八、对象
改一下，对象属性名改成改中横线的，属性名加引号，但此时访问，中横线会被当成是减号，unmade当成一个变量，从而报错：uname is not defined。Math.random() 随机数函数， 返回一个0 - 1之间，并且包括0不包括1的随机小数。直接用普通for循环的话，对象和数组不同，没有length属性，循环次数确定不了 ==>JS对象 = 属性 + 方法（类似Java中，类 = 属性 + 方法）此时，可用另一种查询语法：对象[‘属性名’]在对象中声明方法以后，通过。
2025-03-28 20:42:53
593
原创 【JavaScript】五、流程控制语句
F12打开开发者工具，在source一栏，选择代码文件，点击对应的行号打断点，程序执行到断点处会暂停下来，点对应的调试按钮，debug代码。调样式的过程中，发现盒子有点错位，因为算数式子长短不同，可以给所有盒子定一个最大长度，如上面的90px，这样就整齐了。用户A有10000元，可以选择存钱、取钱、查看余额和退出功能，如果不是退出，则一直给弹窗。练习2：实现用户输入1个数，如果数字小于10，则前面进行补0， 比如 09、03。页面弹出对话框，‘你爱我吗’，如果输入‘爱’，则结束，否则一直弹出对话框。
2025-03-21 01:04:44
1157
原创 【JavaScript】四、运算符
如上，前置自增，i先变成2，再使用，结果为4，后置自增，i先使用，结果是3，然后i再自增1，变成2，但此时已经不影响console.log打印的结果了。练习：用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true，否则弹出false。比较结果为boolean类型，即只会得到 true 或 false。开发中判断是否相等，强烈推荐使用 ===
2025-03-19 20:20:55
787
原创 【JavaScript】三、数据类型
未定义是比较特殊的类型，只有一个值 undefined只声明变量，未赋值的情况下，变量的默认值为 undefined一般不直接给某个变量赋一个undefined的值let ageconsole.log(age) //输出undefined声明一个变量后，常通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
2025-03-18 23:29:30
1093
原创 【JavaScript】二、变量、常量
有2个变量：num1 里面放的是 10， num2 里面放的是20，交换二者的值。变量本质：是程序在内存中申请的一块用来存放数据的小空间。浏览器中弹出对话框: 请输入姓名，并打印在页面上。取出来是什么类型的，就根据这种类型特点来访问。声明语法：使用let关键字。一次性声明多个（不推荐）变量，一个装东西的盒子。
2025-03-18 00:51:34
314
原创 【JavaScript】一、JS的引入与输入输出
JavaScript是一种运行在客户端(浏览器)的编程语言，实现人机交互效果，相比，HTML则是一种标记语言。网页特效 ：监听用户的一些行为让网页作出对应的反馈，如轮播图表单验证 ：针对表单数据的合法性进行判断数据交互 ：获取接口返回的数据, 渲染到前端页面服务端编程 ：node.js--JS参考网站：MDN--> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript。
2025-03-17 23:52:01
1142
原创 【CSS】二、浏览器调试与文字样式
Command+Option+I或者F12打开开发者模式，选中元素栏Elements，然后选择左上方箭头，点击页面任意位置定位代码和CSS样式：如此，发现项目中font.html文件的第8行，有错误（注意“⚠️”这个符号），检查发现是忘记带单位px，改完错误后，鼠标悬停在样式代码上，发现这两个都打了✅，说明都生效了，取消勾选，可直接调试效果：刷新浏览器，重置调试，回到代码中的效果常用值：px即像素，谷歌浏览器默认字号16px2.2 字体粗细数字加粗700正常400
2025-03-16 16:58:55
1064
原创 【CSS】一、基础选择器
上面是最简单的一种写法，title标签下方写style标签（因为CSS是给浏览器看的，是浏览器渲染给你看，所以放html的head里），CSS，Cascading Style Sheets，层叠样式表，是一种样式表语言，用于表述HTML的呈现，做美化的。另外，和类选择器不同的是，同一个id选择器，在一个页面只能使用一次。设置相同的样式，如p, h1, div, a, img…缺点：同名标签的显示效果只能一样，即不能差异化。用于查找标签，差异化设置标签的显示效果，用于查找页面所有标签，class="类名"
2025-03-15 21:48:49
1151
原创 【HTML】三、表单与布局标签
label还可以绑定文字和表单组件的关系，用于增大表单的点击范围，如下面这个单选框，本来要点到小圆点上才生效，修改后，可以让其点到男、女两个字上时也生效，以提高用户体验。select 嵌套 option，父子关系，select 是下拉菜单整体，option是下拉菜单的每一项，默认显示第一项，selected属性实现默认选中功能。：label标签只包裹内容，不包裹表单组件标签，要求label的for属性，等于表单标签的id属性。在网页中显示预留字符时，用右边的实体名称，一般&开头；
2025-03-15 14:57:18
912
原创 【HTML】二、列表、表格
一个标题下有多个内容，如很多官网底部的：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情< body > < dl > < dt > 服务中心 </ dt > < dd > 申请售后 </ dd > < dd > 售后政策 </ dd > < dd > 维修服务价格 </ dd > < dd > 订单查询 </ dd > < dd > 以旧换新 </ dd > </ dl > </ body >
2025-03-15 14:06:33
1126
原创 【HTML】一、基础标签
html，HyperText Markup Language，超文本标记语言超文本，即链接🔗标记，即标签、尖括号如下图左侧，即为html双标签成对出现，中间包裹内容单标签只有开始标签，没有结束标签，如换行<br>、水平线<hr>Ctrl + S，保存后，右键Open In Browers。
2025-03-12 20:11:15
732
原创 有状态和无状态
服务端会持久化或维护客户端的状态信息（如用户数据、会话、业务上下文），且状态与特定客户端强绑定,从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如 tomcat 中的 session。服务端不存储任何客户端的状态，处理一次请求所需的全部信息，都包含在客户端的这个请求里，客户端的每次请求必须具备自描述信息，通过这些信息识别客户端身份。
2025-03-09 17:49:35
439
原创 长连接和短连接
建立连接意味着双方协商好通信规则，并分配资源（端口、内存）用于数据传输，常见的连接如TCP连接（Transmission Control Protocol）连接建立后，可以多次传输数据，但长连接会一直占用资源，服务器需要维护连接列表，长时间闲置可能被防火墙或 NAT 设备中断。案例 1：短连接（HTTP 请求），每次请求都要重复握手，适合小数据量场景。案例 2：长连接（WebSocket），减少了握手开销，适合高频交互场景。连接，指两个设备（如。
2025-03-09 12:15:46
715
原创 【RocketMQ】二、架构与核心概念
建立长连接，并获取消息要发的topic都分布在哪些Broker节点上，选择一个后，与对应的Broker建立长连接，将消息直接发送到对应的Broker。建立长连接，并获取订阅的topic都分布在哪些Broker节点上，根据消费配置，与对应的Broker建立长连接后消费消息。，即上图中的模式，ConsumeGroup A订阅了Topic A，Topic A又对应了三个队列，而Group。生产者实例启动后，发消息时，需要知道它消息的这个topic要往哪个broker发，因此，先跟NS集群的。
2025-03-08 23:19:17
1275
原创 SpringBoot2.x与SnakeYaml的不兼容问题
刚开始处理这个问题时，先是看到一个帖子下的另一个方案：自己改SnakeYaml2.x的依赖，加上那些被移除但Spring Boot2启动要用的方法和API，然后重新打包后引入。很明显，SnakeYaml版本做了大升级了，一些API被移除了，但我当前的Spring Boot启动又要用到，导致了版本不兼容的问题。于是，直接引入2.0的依赖应该就好了，也不用execution做依赖排除，因为直接依赖优先级高于间接依赖。近期扫描服务中引入的依赖是否有安全漏洞。
2025-03-05 20:46:57
817
原创 策略模式环境类的实现方式对比
以后要新增6.x的处理器逻辑，只需新增实现 ClusterMetaDataProcessor 的 Bean，无需修改现有的代码，符合开闭原则。
2025-02-26 23:20:53
1148
TA创建的收藏夹 TA关注的收藏夹
TA关注的人