- 博客(97)
- 收藏
- 关注
RSS订阅原创 练习小项目11：鼠标跟随小圆点
本文介绍鼠标跟随圆点效果的实现方法：1. 基础版：单个圆点跟随鼠标移动，通过监听mousemove事件更新圆点位置，CSS添加transition实现平滑过渡。2. 进阶版：使用10个圆点形成拖尾效果，通过记录鼠标移动轨迹数组，让每个圆点依次跟随前一个位置，并设置透明度/大小渐变。3. 关键技巧：添加pointer-events:none避免鼠标事件冲突，使用Array.from初始化位置数组，以及通过opacity和transform实现视觉渐变效果。完整代码包含HTML结构、CSS样式和JavaScri
2025-06-13 11:10:24
307
原创 练习小项目10：滚动返回顶部
摘要：本文介绍了如何实现"返回顶部"功能。通过监听页面滚动事件(window.scrollY)，当滚动超过200px时显示固定定位的按钮。点击按钮时使用window.scrollTo({top:0, behavior:'smooth'})实现平滑滚动回顶部。文中详细说明了HTML结构、CSS样式设置(固定定位、初始隐藏)和JavaScript实现逻辑，并对比了scrollTo方法的传统参数写法与新式对象参数写法的区别。该功能适用于长页面，提升用户体验。
2025-05-30 10:24:58
232
原创 练习小项目9：打字效果文字展示（多段文字循环+删除+光标闪烁）
本文介绍使用原生JavaScript实现打字机动画效果。通过维护文本数组，利用状态变量控制"打字"和"删除"两种模式，配合setInterval和setTimeout实现逐字显示、暂停、删除的循环播放效果。CSS部分实现光标闪烁动画，增强视觉效果。核心代码包含文本轮播逻辑、计时器控制和状态切换，适用于网站欢迎语等动态文本展示场景，能有效提升页面交互体验。实现要点包括字符串截取、定时器管理和CSS动画应用。
2025-05-29 11:06:14
277
原创 练习小项目8：图片轮播③
本文介绍了轮播图小圆点指示器的实现方法。核心思路包括：初始化显示首图和高亮点，通过点击按钮或圆点切换图片时计算新索引（支持循环），并更新图片显示和圆点高亮状态。HTML结构包含图片容器、控制按钮和圆点容器。CSS设置轮播图样式和圆点交互效果。JavaScript实现功能包括：创建动态圆点并绑定点击事件、图片淡入淡出过渡、自动轮播及鼠标悬停暂停。特别解决了快速切换时动画失效问题：通过setTimeout确保淡出动画完成后再加载新图片，避免因浏览器缓存导致的onload回调失效。
2025-05-27 12:09:28
344
原创 练习小项目8：图片轮播②
这篇博客介绍了如何为图片轮播添加淡入淡出动画效果。主要实现方法是通过CSS定义.hidden类实现透明度过渡，在JS中使用onload事件确保图片加载完成后再触发动画。关键点包括：1) 切换图片前先添加hidden类淡出当前图；2) 等新图加载完成(onload)后再移除hidden类实现淡入；3) 添加鼠标悬停暂停播放功能。文章特别解释了为什么必须使用onload事件，否则会导致动画效果失效（图片未加载完就触发动画）。完整代码可参考原博客项目。
2025-05-26 10:17:38
225
原创 练习小项目8：图片轮播
这篇文章介绍了一个图片轮播功能的实现方法。主要技术点包括：1)使用数组存储图片URL，通过索引循环切换；2)DOM操作更新图片和样式；3)自动轮播与手动控制交互。关键实现细节：使用模运算处理循环索引，确保"上一张"按钮在首张时跳至末张；手动操作后重置定时器，避免自动切换干扰用户体验。代码提供了完整的轮播逻辑，包括3秒自动切换和手动按钮控制功能，并解释了循环索引计算和定时器重置的原理。
2025-05-24 10:34:06
543
原创 练习小项目7：天气状态切换器②
本文介绍了如何为天气状态轮播功能添加“暂停/恢复轮播”按钮以及淡入淡出动画效果。首先，通过setInterval实现天气状态的自动轮播，并通过(i+1)%weatherData.length实现循环。接着，添加一个按钮用于控制轮播的暂停与恢复，通过clearInterval和重新调用setInterval来切换状态，并更新按钮文字。此外，通过添加fade-out类和使用setTimeout延迟文字替换，实现了淡入淡出的动画效果。最后，文章还解释了为什么在初始化时需要主动设置按钮文字，以及setTimeout
2025-05-23 11:04:02
848
原创 练习小项目7：天气状态切换器
本项目旨在通过点击按钮实现天气状态的切换，并伴随背景颜色或页面样式的变化。功能包括显示当前天气（如晴天、多云、雨天），点击“切换天气”按钮后，依次切换到下一种天气状态，并更新页面背景和图标。技术点涉及数组索引循环、DOM文本和样式修改、classList切换等。页面结构包括一个显示天气的文本区域和一个切换按钮。JavaScript代码通过数组存储天气数据，使用索引循环实现天气切换，并通过classList动态修改页面样式。CSS部分定义了不同天气对应的背景颜色和文本样式。项目还探讨了循环索引技巧、清空样式的
2025-05-22 10:39:10
619
原创 练习小项目6：简单待办事项筛选器
本项目旨在开发一个待办事项管理系统，核心功能包括任务添加、实时筛选和任务删除。用户可以通过输入框添加任务，并利用关键词进行实时筛选，系统将动态显示匹配的任务。若无匹配项，则显示“没有匹配的任务”提示。删除功能允许用户移除特定任务。技术实现上，项目运用了JavaScript的input事件监听、数组的filter()方法以及DOM动态渲染技术，体现了模块化编程思维。此外，代码中通过防御性编程处理了潜在的undefined和NaN情况，增强了程序的健壮性。整体设计简洁高效，旨在提升用户的任务管理体验。
2025-05-20 11:31:38
373
原创 练习小项目5：基础计算器
本文介绍了一个实现基本四则运算的网页计算器项目。项目目标是通过用户输入两个数字，点击按钮进行加减乘除运算并显示结果。实现步骤包括获取输入框和按钮、点击按钮时获取输入值并转换为数字、判断是否为有效数字、输出计算结果。文章详细讲解了HTML结构和JavaScript功能实现，强调了使用Number()转换输入值的重要性，以避免字符串拼接问题。此外，文章还探讨了遇到的问题及解决方法，如return后仍显示结果的原因及优化按钮监听器的方法，建议使用事件委托和data-action属性简化代码。最终，通过优化后的代码
2025-05-19 10:58:32
356
原创 练习小项目4：实时时钟展示
本项目通过JavaScript实现了一个实时更新的页面时钟，能够每秒显示当前的日期、星期和时间。利用Date对象获取时间信息，并通过setInterval()函数实现每秒更新。时间格式通过字符串拼接和padStart()方法确保两位数显示。HTML结构包括一个标题和一个用于显示时间的div，JavaScript代码通过innerHTML属性动态更新内容，确保页面始终显示最新时间，避免内容累积。此外，文章还解释了innerHTML和textContent的区别，强调了它们在清空和重新插入内容时的作用。
2025-05-17 10:37:58
187
原创 练习小项目3：随机正能量语录生成器
本项目通过创建一个包含正能量语录的数组，并利用Math.random()方法随机选取语录，实现了点击按钮时在页面上展示随机语录的功能。关键步骤包括：创建数组、获取DOM元素、绑定点击事件、随机选取语录并更新页面显示。此外，通过添加fade-in动画效果，增强了用户体验。项目中还探讨了如何通过void element.offsetWidth强制触发浏览器重绘，以确保动画在每次点击时都能重新执行。这一技巧利用了浏览器在读取布局属性时必须完成渲染计算的特性，有效解决了动画不重新触发的问题。
2025-05-16 10:56:35
606
原创 练习小项目2：今日幸运颜色生成器
本文介绍了一个简单的JavaScript项目，目标是通过点击按钮随机生成一个颜色，并将页面背景改为该颜色，同时显示颜色的HEX值。项目的主要功能包括监听按钮点击事件、随机生成16进制颜色代码、修改页面背景色以及动态更新颜色值的显示。文章详细解释了如何通过Math.random()生成随机颜色，并确保生成的HEX值始终为6位。此外，还总结了项目中涉及的关键技能点，如获取DOM元素、事件监听、颜色生成、样式修改和动态内容更新。通过这个项目，读者可以掌握基本的JavaScript操作和DOM操作技巧。
2025-05-15 10:57:48
246
原创 练习小项目1：倒数日小工具
本文介绍了如何通过JavaScript实现一个简单的倒计时功能。用户可以通过输入一个未来日期，点击“计算倒计时”按钮后，页面会显示距离该日期还有多少天。实现步骤包括：获取用户输入的日期、计算与当前日期的差值、将结果动态渲染到页面中。代码中使用了new Date()获取日期对象，getTime()计算时间差，并通过Math.ceil()将时间差转换为天数。此外，还进行了日期合法性检查，并处理了日期已过去或为当天的情况。最后，通过动态生成DOM元素展示结果，提升了用户体验。进阶思考包括支持目标名称输入、重置按钮
2025-05-14 14:49:32
322
原创 关于flex布局
flex是flexible Box的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以制定为flex布局。通过给父盒子（父元素）添加flex属性，来控制子盒子（子元素）的位置和排列方式。
2025-04-29 10:58:51
749
原创 关于CSS表达使中使用的 max() 函数
保证元素有一个最小宽度（250px），但在屏幕变宽时，元素可以根据视口宽度进行伸展，最多占据视口的 25%。函数：它会返回括号中给定的值中的最大值。，然后选择其中的较大值作为元素的宽度。，所以元素的宽度会是 300px。
2024-11-09 13:30:47
332
原创 CSS---关于 font: 15px/1.5 和 font: 15px/15px 的区别
表示字体大小是15px，行间距是1.5em（即行间距是字体大小的1.5倍：15px × 1.5 = 22.5px）。②font: 15px/15px "宋体" ......;①font：15px/1.5 "宋体" ......;表示字体大小是15px，行间距也是15px。
2024-06-28 16:15:55
268
原创 localstorage和sessionstorage的区别
localStorage 和 sessionStorage 是 HTML5 提供的两种在客户端存储数据的方式，它们都可以在浏览器端存储数据，不同之处在于数据的生命周期和作用域。localStoragelocalStorage 用于长期保存整个网站的数据，保存的数据没有过期时间，直到手动删除。 数据存储在客户端，不会被发送到服务器端。 可以通过 JavaScript 的 localStorage 对象进行读取和写入操作。 存储的数据是以键值对的形式存储的。sessionStorageses
2024-04-22 15:46:42
359
原创 vue3中setup函数的理解
函数在 Vue 3 中承担了设置组件状态、处理生命周期钩子、处理事件等任务，使得组件的逻辑更加清晰、灵活，并且提高了代码的可维护性和可复用性。函数是用于设置组件的配置和状态的地方。它是组件内部的一个新特性，用于替代 Vue 2.x 中的。在 Vue 3 中，
2024-04-15 16:44:45
830
1
原创 LeetCode 28.找出字符串中第一个匹配项的下标。（通过JavaScript实现）
startsWith() ：用于检测字符串是否以指定的子字符串开始，是返回true，否则返回false（该方法会区分大小写）。"leeto" 没有在 "leetcode" 中出现，所以返回 -1。字符串的第一个匹配项的下标（下标从 0 开始）。第一个匹配项的下标是 0 ，所以返回 0。"sad" 在下标 0 和 6 处匹配。
2024-03-31 07:35:44
251
原创 LeetCode 2908. 元素和最小的山形三元组 I。（通过JavaScript实现）
这个三元组的元素和等于 nums[1] + nums[3] + nums[5] = 13。可以证明不存在元素和小于 13 的山形三元组。这个三元组的元素和等于 nums[2] + nums[3] + nums[4] = 9。可以证明不存在元素和小于 9 的山形三元组。- nums[2] < nums[3] 且 nums[4] < nums[3]- nums[1] < nums[3] 且 nums[5] < nums[3]可以证明 nums 中不存在山形三元组。如果不存在满足条件的三元组，返回。
2024-03-29 11:35:55
343
原创 LeetCode 2864. 最大二进制奇数。（通过JavaScript实现）
console.log( str.repeat(2)) ===> 输出的结果是"testtest"其中一个 '1' 必须出现在最后一位上。而由剩下的数字可以生产的最大数字是 "100"。所以答案是 "1001"。因为字符串 s 中仅有一个 '1' ，其必须出现在最后一位上。所以答案是 "001"。以字符串形式，表示并返回可以由给定组合生成的最大二进制奇数。字符串中的位，使得到的二进制数字是可以由该组合生成的。例如：let str = "test"：用于字符串复制指定次数的方法。
2024-03-13 11:14:43
532
原创 LeetCode 1. 两数之和。（通过JavaScript实现）
哈希表（Hash table），也称为哈希映射（Hash map）或关联数组（Associative array），是一种用于存储键值对的数据结构。它通过将键映射到数组中的一个位置来实现快速的查找操作。遍历数组，对于每个元素，检查目标值与当前元素的差值是否在哈希表中存在，如果存在，则返回两个元素的下标。对象可以看作是一种哈希表的实现，虽然实现细节不可见，但底层仍然会使用哈希函数来确定数组中元素的存储位置。但是，数组中同一个元素在答案里不能重复出现。整数，并返回它们的数组下标。，请你在该数组中找出。
2024-03-08 11:34:03
618
原创 LeetCode 26. 删除有序数组中的重复项。（通过JavaScript实现）
的前五个元素被修改为 0, 1, 2, 3, 4。不需要考虑数组中超出新长度后面的元素。// 长度正确的期望答案。的前两个元素被修改为 1, 2。不需要考虑数组中超出新长度后面的元素。函数应该返回新的长度 5， 并且原数组。如果所有断言都通过，那么您的题解将被。函数应该返回新的长度 2，并且原数组。，返回删除后数组的新长度。删除重复出现的元素，使每个元素。
2024-03-08 11:13:21
526
原创 LeetCode 2917. 返回 nums 的 K-or 值。（通过JavaScript实现）
因为 k == 6 == nums.length ，所以数组的 6-or 等于其中所有元素按位与运算的结果。因此，答案为 2^0 + 2^3 = 9。nums[1]、nums[2]、nums[3]、nums[4] 和 nums[5] 的第 3 位的值为 1。nums[0]、nums[2]、nums[4] 和 nums[5] 的第 0 位的值为 1。nums[0]、nums[1] 和 nums[5] 的第 2 位的值为 1。nums[0] 和 nums[5] 的第 1 位的值为 1。
2024-03-06 16:05:58
394
原创 安装nvmw工具时遇到npm ERR! code CERT_HAS_EXPIRED报错解决方法
在尝试使用npm（Node.js包管理器）安装或更新包时，因为npm服务器的SSL证书已过期，遇到的问题如下图：解决方法。
2024-03-04 16:16:22
750
原创 【Vue3+Ts项目】硅谷甄选 — 菜单权限+按钮权限
/ 获取对应的用户仓库// 全局自定义指令：实现按钮的权限// 代表使用这个全局指令的DOM|组件挂载完毕的时候会执行一次// 自定义指令右侧的数值：如果在用户信息buttons数组中没有// 从DOM树上干掉if (!},})在main.ts文件中引入自定义指令文件// 引入自定义指令文件PS:此处以其中一个按钮作为例子，项目中其他按钮的权限都需要配置。
2024-01-19 15:30:39
1225
2
原创 【Vue3+Ts项目】硅谷甄选 — 用户管理+角色管理+菜单管理+首页
/账号信息的ts类型//代表一个账号信息的ts类型id?: string//数组包含全部的用户信息//获取全部用户信息接口返回的数据ts类型data: {//代表一个职位的ts类型id?: string。
2024-01-12 15:33:49
1122
原创 javascript数组方法----reduce
累积器函数执行用户定义的操作，它可以采用累积值和当前元素，并返回新的累积值。这个新的累积值将在下一次迭代中传递给累积器函数。方法从数组的第一个元素开始，依次遍历每个元素，每次调用累积器函数，并传递两个参数：累积值（上一次调用的结果）和当前元素。这个函数用于执行累积操作，即将数组中的元素逐个应用到累积值，并返回新的累积值。：用于对数组中的元素进行累积操作，将数组的每个元素应用到指定的累积器函数，然后返回累积的结果。方法会继续迭代数组中的每个元素，依次调用累积器函数，并更新累积值，直到处理完数组的所有元素。
2024-01-09 17:12:11
449
原创 【Vue3+Ts项目】硅谷甄选 — 品牌管理+平台属性管理+SPU管理+SKU管理
/ 已有的品牌的ts数据类型id: number// 包含全部品牌数据的ts类型// 获取的已有全部品牌的数据ts类型data: {orders: []......enum API {......// 添加品牌// 修改已有品牌// 添加与修改已有品牌接口方法// 修改已有品牌的数据} else {// 新增品牌SPU：电商术语，代表的是一个标准化产品单元。（类）SPU组成：产品品牌名称+描述+产品图片介绍+销售属性【整个项目销售属性一共三个：颜色、版本、尺码】
2024-01-09 17:04:49
2087
原创 【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权
定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?:string// 登录接口返回的数据类型封装本地存储数据和读取方法：src/utils/token.js// 存储数据。
2023-12-08 15:15:51
2880
原创 【Vue3+Ts项目】硅谷甄选 — 搭建后台管理系统模板
/ 登录接口需要携带参数ts类型// 登录接口返回的数据类型// 定义服务器返回用户信息相关的数据类型data: userPS关于import type引入的理解-CSDN博客。
2023-12-01 21:18:22
2613
原创 关于import type引入的理解
import type 是 ECMAScript 模块系统中的一种语法，用于引入类型信息而不引入实际的运行时代码。它通常与 TypeScript 类型检查工具一起使用。
2023-12-01 14:31:59
2466
原创 vue3---自定义插件注册全局对象
① 在src/components文件夹下创建index.ts：用于注册components文件夹下全部的全局组件。②在入口文件（通常是main.ts）引入步骤①的index.ts文件，通过app.use方法安装自定义插件。
2023-11-28 18:13:28
1192
原创 关于src别名的配置之tsconfig.json配置
baseUrl./../基地址baseUrl./baseUrl的值是相对于文件所在的目录的路径。在这个配置中，"./"表示基础路径是当前文件所在的目录。解析非相对模块：当 TypeScript 编译器遇到import或require语句引用一个非相对路径的模块时，它会使用baseUrl作为起点，拼接上模块的相对路径，以解析最终的文件路径。
2023-11-28 10:47:01
1942
原创 关于配置src别名中的path.resolve(“./src“)
通常更安全，因为它是当前模块的目录，不受工作目录的影响。而使用相对路径可能受到工作目录的影响，因为工作目录可能会在不同的执行环境中变化。都是用于生成绝对路径的，但它们的基础路径不同。方法用于将路径或路径片段解析为绝对路径。所以，主要区别在于基础路径不同。例如，如果当前模块的路径是。如果当前模块的路径是。当前模块文件所在的（相对于当前工作目录（
2023-11-28 10:24:42
2158
原创 TypeScript学习记录
泛型类型是一种在编程中使用的抽象类型，它允许你定义一个类型占位符，在实际使用时再指定具体的类型。在 TypeScript 中，泛型类型可以应用于函数、类、接口等，提供更灵活和可重用的代码结构。是泛型类型参数，它表示一个占位符，具体的类型将在使用时提供。函数签名指的是函数的声明或者定义中包含的信息，主要包括函数的参数类型、参数个数、返回类型等。函数签名定义了函数的形状，是函数类型的一部分。是一个函数类型，它的函数签名表示这个函数接受两个参数，都是。类型的具体函数，它接受两个参数并返回它们的和。
2023-11-23 15:03:30
486
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人