- 博客(207)
- 收藏
- 关注
RSS订阅
原创 元素偏移（offset，scroll,client)介绍，动态设置类名，样式
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
2024-08-17 10:56:45
2560
5
原创 js获取本周时间,当月的日期,计算两个时间差，距离当前日期后几天的日期
本片文章主要记录一下遇到的问题，js计算当前一周的日期。感兴趣的小伙伴可以学习一下。
2024-08-02 16:50:48
8945
33
原创 让文字立起来
属性用于控制元素的可见部分，类似于 Photoshop 中的蒙版（Mask）。它可以基于图像、渐变或 SVG 来隐藏或显示元素的某些区域。属性用于对元素（通常是图像或文本）应用图形效果，比如模糊、亮度调整、阴影等。，这会创建一个从透明到黑色的渐变蒙版，使阴影从上到下逐渐消失，营造出更自然的阴影淡化效果。伪元素，使阴影变得模糊，从而增强立体感。
2025-06-27 10:39:07
893
原创 CSS width: fit-content 详解
是 CSS 中一个非常实用的属性值，它可以让元素的宽度自动调整以适应其内容。下面我将详细解释它的工作原理和使用场景。上面的例子中，div的宽度会刚好包裹文本内容，而不会扩展到父容器的100%宽度。是一个非常实用的CSS特性，特别适合需要元素宽度自适应内容的场景。这样按钮的宽度会刚好包裹文字内容，而不会过宽或过窄。
2025-06-26 11:31:02
404
原创 多行文字擦除效果
文字擦除效果</.appwidth;height;;left;top;pmargin;color;inherits;;.text--v;color;animation;
2025-06-25 23:03:07
284
原创 使用IntersectionObserver实现图片懒加载
这段代码实现了一个基本的图片懒加载功能，使用 IntersectionObserver API 来检测图片是否进入视口（viewport），如果是，则将 data-src 的值赋给 src 属性，从而触发图片加载。当 entry.isIntersecting 为 true 时，表示目标元素（img）已进入视口。将 data-src 中的真实图片 URL 赋给 src，浏览器会自动加载图片。当目标元素 刚进入视口（0%） 时触发回调。默认是 0，可以不写。图片加载后，停止观察该元素，避免重复触发。
2025-06-25 11:37:37
408
原创 CSS :focus-within `:has,selection等伪类
是一个功能强大的CSS伪类，它允许开发者选择包含特定子元素或满足特定条件的父元素。这个选择器被称为"父选择器"或"反向选择器"，因为它可以选择基于后代元素的祖先元素。这个选择器非常有用，可以在子元素获得焦点时对父元素或祖先元素应用样式。伪类极大地扩展了CSS的选择能力，使开发者能够基于内容或子元素状态更灵活地设计样式，减少了JavaScript处理样式的需求。是一个强大的CSS伪类，可以极大地增强用户界面的交互性和可访问性，特别是在表单和复杂交互组件中。伪类不同，后者只在元素本身获得焦点时匹配。
2025-06-24 16:02:43
1048
原创 IntersectionObserver 详细介绍（实现加载下一页效果）
IntersectionObserver API 提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉状态的方法，非常适合实现无限滚动或分页加载功能。
2025-06-24 15:28:17
1298
原创 卡片翻转效果
卡片翻动</.appwidth;height;;position;display;;;.cardwidth;height;cursor;box-sizing;;;color;width;height;;border;display;;;position;;box-shadow;transition;;;box-shadow;
2025-06-23 17:10:50
430
原创 css 四角线框跟随移动
*线框与图片的间隙 *//*图片左上角横坐标 *//*图片左上角纵坐标 *//*四角线框长度 *//*四角线框粗细 */
2025-06-23 13:21:30
1364
原创 css点击按钮出现水波纹效果
应用名为 ripple 的关键帧动画，持续1秒，使用 ease-out 缓动函数（动画开始时快，结束时慢）。排除按钮处于激活（按下）状态的情况。这样水波纹动画只会在按钮被聚焦但未被按下时触发。选择器匹配获得焦点的按钮（例如通过键盘Tab键聚焦或鼠标点击后）。针对按钮的伪元素应用样式，这个伪元素将作为水波纹的视觉元素。
2025-06-23 10:28:40
245
原创 margin-block-start定义元素在块级流方向起始边缘的外边距
设置元素在块级流方向开始位置的外边距。具体表示的物理方向取决于文档的和direction属性。
2025-06-22 17:13:23
257
原创 CSS 逐帧动画
逐帧动画(frame-by-frame animation)是一种通过快速连续显示一系列静态图像来创造运动效果的技术。以下是使用CSS实现逐帧动画的几种方法。这是实现逐帧动画最常用的方法，通过的函数实现。参数说明： - 表示动画分为6步完成 - 雪碧图总宽度(6帧 × 每帧100px)2. 完整雪碧图动画示例3. 多行雪碧图处理对于包含多行动画的雪碧图：4. 使用多个DOM元素实现逐帧动画如果不使用雪碧图，可以通过切换多个元素的显示来实现：5. 使用CSS自定义属性控制动画帧性
2025-06-22 16:53:24
857
原创 CSS 实现滚动吸附效果
滚动吸附（Scroll Snap）是一种 CSS 功能，可以让滚动操作结束时自动吸附到特定位置，非常适合创建分页滚动、轮播图或图片画廊等效果。
2025-06-22 16:48:42
933
原创 CSS平滑滚动效果实现方法
window.scrollTo() 是 JavaScript 中用于控制窗口滚动位置的方法，它可以实现即时滚动和平滑滚动两种效果。
2025-06-22 16:44:49
213
原创 JavaScript 中 call、apply 和 bind 的区别
这三个方法都是 JavaScript 中用于改变函数执行时this指向的方法，但它们在使用方式和效果上有重要区别。
2025-06-19 09:59:12
434
原创 js继承有哪些方法
继承方式优点缺点适用场景原型链继承简单共享引用属性、无法传参简单原型继承构造函数继承可传参、不共享属性无法继承原型方法需要隔离实例属性的场景组合继承结合两者优点调用两次父类构造函数通用场景原型式继承简单对象继承共享引用属性简单对象创建寄生式继承增强对象共享引用属性需要增强对象的场景寄生组合式继承最优性能实现稍复杂需要高效继承的场景ES6 Class继承语法简洁需要ES6支持现代JavaScript开发。
2025-06-19 09:33:01
506
原创 JavaScript 闭包
闭包是 JavaScript 中一个非常重要且强大的概念。简单来说，闭包是指一个函数能够记住并访问其词法作用域（lexical scope），即使该函数在其词法作用域之外执行。
2025-06-18 16:40:32
315
原创 Vue 3 常用响应式数据类型详解：ref、reactive、toRef 和 toRefs
特性refreactivetoReftoRefs创建方式ref(value)值访问需要.value直接访问需要.value每个属性需要.value模板使用自动解包直接使用自动解包每个属性自动解包主要用途基本类型/对象引用复杂响应式对象提取单个响应式属性解构响应式对象响应性保持完全响应式深度响应式保持与源连接保持所有属性连接。
2025-06-17 16:53:09
746
原创 export default 和 export 的区别
用于导出模块的主要功能，导入时可以自由命名export：用于导出多个功能，导入时必须使用正确名称根据模块的设计意图选择合适的导出方式在 Vue 项目中，组件通常使用，而工具函数和常量使用export理解这两者的区别对于编写清晰、可维护的模块化 JavaScript 代码至关重要。
2025-06-17 16:52:37
681
原创 Vue 中的自定义指令详解
/ main.js 或单独的文件中// 指令定义el.focus()})// 全局注册el.focus()})// 局部注册focus: {el.focus()// 组合式 API 中使用。
2025-06-17 16:35:52
297
原创 vue中常用的api（$set,$delete,$nextTick..)
set是 Vue 实例的一个方法，用于向响应式对象添加一个新的 property，并确保这个新 property 同样是响应式的，且触发视图更新。$set是 Vue 2.x 中解决响应式限制的重要工具，合理使用可以确保数据变化的响应性。但在 Vue 3 中，由于响应式系统的改进，$set的使用场景大大减少。在开发中，应根据 Vue 版本和具体场景选择合适的数据操作方式。$nextTick$nextTick在数据变化后安全地操作DOM确保获取到最新的DOM状态与第三方库正确集成。
2025-06-17 14:52:18
1239
原创 vue2 生命周期有哪些？发送请求在created还是mounted？
创建阶段：beforeCreate → created挂载阶段：beforeMount → mounted更新阶段：beforeUpdate → updated销毁阶段：beforeDestroy → destroyed。
2025-06-17 09:49:18
1524
原创 Java中读取YAML文件配置信息
是 Spring Boot 提供的一个强大注解，用于将外部配置文件（如 YAML 或 properties 文件）中的属性值绑定到 Java 对象上。它是 Spring Boot 外部化配置的核心功能之一。
2025-06-11 14:20:12
1028
1
原创 JavaScript BOM 详细介绍
BOM 的核心是window对象，它代表浏览器窗口，同时也是 JavaScript 的全局对象。所有全局 JavaScript 对象、函数和变量都自动成为window对象的成员。控制浏览器窗口（window）操作 URL（location）管理浏览历史（history）获取浏览器信息（navigator）获取屏幕信息（screen）客户端存储（localStorage/sessionStorage）显示对话框（alert/confirm/prompt）
2025-06-10 17:56:29
863
原创 Animate On Scroll 用于在用户滚动页面时实现元素的动画效果
AOS（Animate On Scroll）是一个轻量级的JavaScript库，用于在用户滚动页面时实现元素的动画效果。它允许网页元素在进入或离开视口（viewport）时触发各种CSS动画，为网页增添动态交互效果。通过CDN引入基本使用方法初始化AOS在HTML元素上添加动画属性配置选项可以在初始化时传递配置对象：可用动画类型AOS提供了多种预设动画效果：可以在单个元素上覆盖全局设置：响应式设置可以针对不同屏幕尺寸禁用AOS：或使用更精确的控制：动态添加元素如果动
2025-06-06 13:17:36
928
JavaScript日期操作技术解析与实践应用
2024-10-20
微PE工具箱系统重装详细指南
2024-10-11
Converting circular structure to JSON
2024-12-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人