- 博客(192)
- 收藏
- 关注
RSS订阅原创 吐血整理！前端最恶心的 19 种代码屎山，你中招没？
遇到屎山不要怕，记住：“前人挖坑，后人填土，总有一天，青山绿水。对了，第20个屎山，谁来补充？
2025-04-01 15:01:42
823
原创 前端新手必知必会的20个基础知识点（HTML/CSS/JS）
- 推荐：延迟执行 -->box-sizing: border-box;/* 推荐：宽高包含padding和border */<img src="image.jpg" alt="描述文字" loading="lazy">/* 交叉轴对齐 *//* 子元素间距 */justify-content: space-between;/* 主轴对齐 *//* 彻底消失，不占空间 *//* 隐藏但占空间 *//* 内容宽度 *//* 透明但可交互 */.btn { } /* Class选择器 */
2025-03-29 16:07:07
380
原创 前端页面的“三明治“结构：三层拆解一看就懂
一、先看三层结构全家福1. 结构层（HTML）→ "毛坯房骨架"核心作用：搭建网页的钢筋水泥结构定义内容的摆放位置（哪里是客厅、卧室）告诉浏览器这里有什么内容（文字/图片/按钮）常用工具：<div>、<p>、<h1>、<ul>、<img>等HTML标签。
2025-03-29 16:06:28
911
原创 2分钟理解JavaScript严格模式，避开这些常见陷阱
JavaScript的严格模式（Strict Mode）是ECMAScript 5引入的一项重要特性，旨在让代码运行更安全，同时避免一些常见的编程错误。通过简单地在脚本或函数的开头添加声明，我们就可以启用这一模式。
2025-03-24 14:45:00
295
原创 10个JavaScript一行代码，解决90%的开发难题
在JavaScript开发过程中，我们经常会遇到一些看似复杂但实际上可以通过简洁的代码解决的问题。下面分享10个JavaScript一行代码技巧，解决日常开发中的常见难题。
2025-03-24 12:00:00
206
原创 在登录点击浏览器返回上一页，不会返回锁屏和首页
锁屏和框架一样，不过锁屏和框架他们两个还有一个值如果这个值为1就跳转框架，否则跳转锁屏，在登录页的时候要把这个值改为1。在框架判断是否有登录存储这个值，如果没有弹出窗提示用户，清空存储跳转到登录页。在登录成功的时候，存储登录接口返回的值。
2025-03-20 14:07:54
136
原创 视频录制秘籍：打造超一流技术讲解视频
要自己先写一个大纲，进行自己需要讲解的内容捋一个思路，在进行讲解的时候根据自己写的大纲进行讲解，在讲解的时候还需要对难点进行讲解，在讲解代码之前可以给的代码多写几个注释，方便讲解，不会卡顿，在看项目讲解的时候要把自己使用的方法讲解出来，比如说讲解搜索功能的时候，你是使用什么方法进行搜索的，我是使用flter进行搜索的，然后如果讲解到同一个的功能，把其中需要注意的点讲出来，比如接口请求，传递参数，等等讲解出来，在讲解的时候要挑几个重要的功能进行详细的讲解，具体如何实现使用了什么方法，进行讲解，对了在讲解项目之
2025-03-20 13:33:49
148
原创 必看！高效实用的 jQuery 校验技巧大揭秘
如果是不只判断输入框或者下拉框的值是否为空，还要判断它的内容是否是正确的，可以使用onchange事件先判断是否有内容如果有内容，在判断内容是否正确，因为需要改变效验的内容所以我们直接使用函数封装，把它的这个内容接过来进行拼接显示。如果是只判断输入框或者下拉框的值是否为空，可以使用onchange事件传this使用jqurey的方法显示效验。
2025-03-20 11:22:05
216
原创 JavaScript 排班系统实战：从代码剖析到应用详解
点击设置排班事件，里面的时间是调用的插件。上午号源 下午号源输入的判断。上午开关和下午开关的判断。
2025-03-20 10:35:05
132
原创 深入解析二级联动科室选择器的实现与应用：从原理到实践的全面探索
定义一个名为 DepartmentSelector 的类，用于创建科室选择器实例构造函数，在创建实例时会自动调用，接收一个包含配置选项的对象初始化配置选项，使用传入的 options 对象中的值，如果某个选项未传入，则使用默认值// 接口请求的 URL// 请求接口所需的令牌// 用户 ID// 选择联动容器的 ID，默认为 'select_linkage'// 输入框的 ID，默认为 'float'// 一级选择框的类名，默认为 'first_select'
2025-03-20 09:49:57
175
原创 JavaScript事件机制详解
JavaScript中的事件模型是指当用户与网页进行交互时，浏览器会触发不同类型的事件，开发者可以通过添加事件监听器来响应这些事件。事件流是描述事件在页面元素中传播的过程，从窗口对象开始，逐级向下传播到最具体的元素，然后再逐级向上冒泡回到窗口对象。在上面的例子中，我们首先获取了一个按钮元素，然后通过addEventListener方法为按钮的点击事件和鼠标悬停事件添加了两个事件监听器。最后，我们展示了如何删除事件监听器。可以通过addEventListener或者直接在HTML元素的属性中添加事件监听器。
2025-03-09 22:08:07
182
原创 CSS动画与过渡效果
和过渡是用来创建网页元素动态效果的技术。动画是指元素从一个状态平滑过渡到另一个状态，而过渡是指元素在某个状态下的属性值平滑地变化。元素上时，背景颜色会平滑地过渡到蓝色，过渡时间为1秒，并使用。在上述例子中，当鼠标悬停在。
2025-03-09 22:06:34
202
原创 HTML 标签语义化指南：让网页更易读
这些标签可以提供更多的语义信息，有助于搜索引擎理解网页内容，并为使用辅助技术的用户提供更好的访问体验。等语义化标签，清晰地定义了页面的结构，并提供了更多的语义信息。可以用于包裹新闻、博客帖子、论坛帖子等独立的文本内容，也可以用于包裹独立的页面组件。每个页面应该只有一个 <main> 标签，用于包裹页面的主要内容部分。提升搜索引擎优化（SEO）：搜索引擎能够更好地理解页面的结构和关键内容，提高网页在搜索结果中的排名。改善可访问性：屏幕阅读器等辅助技术可以更准确地解读页面结构和内容，提供更好的浏览和导航体验。
2025-03-09 22:02:32
243
1
原创 JavaScript 函数初体验
函数体中的代码将这两个参数相加，并将结果存储在局部变量 sum 中。通过将 5 和 10 作为参数传递给函数，我们调用了该函数，并将返回的结果存储在变量 result 中。通过函数，可以将代码分解成较小的部分，每个部分都有特定的功能，并且可以在需要时进行调用。其中，functionName 是函数的名称，参数是函数需要接收的输入值。通过编写和调用函数，可以使代码更加模块化和可重用，减少重复的代码，并提高代码的可读性和可维护性。这里的参数是实际传递给函数的值，与函数定义中的参数对应。
2025-03-09 22:00:46
186
原创 datalist 是什么？以及作用是什么？
用户可以在输入时从这些选项中选择，但也可以输入不在列表中的其他值。<input list="browsers" name="browser" id="browser">：这里的 list 属性关联了 datalist 元素的 id，即 browsers。datalist 元素的主要作用是提供一个友好的用户界面，帮助用户快速地从预定义的选项中选择值，而不需要手动输入。<datalist id="browsers">：datalist 元素的 id 属性值必须与 input 元素的 list 属性值相匹配。
2025-02-27 20:16:41
438
原创 什么是回调函数
在上面的例子中，fetchData函数模拟了一个异步操作，并在2秒后调用传递给它的回调函数processData。回调函数是指在某个函数执行完毕后，将另一个函数作为参数传递给它，并在特定情况下调用该函数。定时任务：在定时任务的场景下，我们可以使用回调函数来执行预定的操作。处理异步操作：当我们需要处理异步操作（例如网络请求或文件读取）时，回调函数可以帮助我们在操作完成后执行相应的代码。高阶函数：回调函数通常用于构建高阶函数，这些函数接受其他函数作为参数，并根据不同的需求执行不同的操作。
2025-02-27 20:15:00
153
原创 什么是原型，有什么用？
原型是JavaScript实现继承的基础，它构成了JavaScript中对象之间的链式关系。1. **属性和方法的继承**：当我们访问对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法。3. **构造函数与实例**：在JavaScript中，构造函数的`prototype`属性指向了一个对象，这个对象就是实例的原型。4. **动态性**：可以通过修改原型对象，动态地为已存在的对象添加新的属性和方法，这对于类似继承和扩展的需求非常有用。
2025-02-26 22:42:29
167
原创 ES6更新的内容中什么是proxy
Proxy 是 ES6（ECMAScript 2015）中引入的一个新的内置对象，用于定义某些操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。通过创建一个对象的 Proxy，你可以控制对这个对象的访问，包括读取属性、设置属性、枚举属性、函数调用等。处理器对象可以定义零个或多个捕获器（trap），这些捕获器是定义在处理器对象上的特定函数，用于拦截并处理目标对象上的操作。Proxy 是一个非常强大的特性，它允许开发者以声明式的方式拦截和修改对象的操作，从而提供了高度的灵活性和控制力。
2025-02-26 22:41:54
229
原创 HTML 新手易犯的标签属性设置错误
滥用target="_blank"属性：将所有链接的目标设为_blank会在新标签页中打开链接，这可能会导致用户在不知情的情况下打开大量新标签页，影响用户体验。正确的做法是只在需要新标签页打开的链接上使用该属性，并在标签中添加适当的提示，让用户知道链接会在新标签页打开。应该根据内容的含义使用正确的语义化标签，比如使用<h1>来表示页面的主标题，<p>来表示段落等。忽略对无障碍性的考虑：新手可能会忽略对无障碍性的考虑，如未为图像添加适当的alt属性、未为表单元素添加标签等。
2025-02-20 19:51:02
450
原创 HTML 图像标签使用陷阱
错误地设置图像大小：可以通过设置width和height属性来指定图像的显示大小，但是一些新手可能会错误地设置了不合适的大小值，导致图像在页面上显示过大或过小，从而破坏了页面的布局。引入错误的图像文件格式：在指定图像路径时，需要确保文件路径正确，并且引入的图像文件是正确的格式（如.jpg、.png等）。如果引入了错误的图像文件格式，图像将无法在浏览器中显示。总之，新手在使用<img>标签时需要注意设置alt属性、正确指定图像路径、正确选择图像文件格式，并且合理考虑图像大小对网页性能的影响。
2025-02-20 19:50:31
104
原创 CSS 伪类和伪元素的混淆
伪类（pseudo-class）是用于选择元素的特定状态或条件的关键词，表示元素在特定状态下的样式。常见的伪类有:hover（当鼠标悬停在元素上时）、:active（当元素被激活时）、:focus（当元素获得焦点时）等。1. 伪元素（pseudo-element）是用于在元素的特定位置插入内容的关键词，表示元素的某个部分的样式。常见的伪元素有::after（在元素内容之后插入内容）、::before（在元素内容之前插入内容）等。它们的作用是相似的，都用于对元素进行样式修饰，但它们的使用方式和语法有所不同。
2025-02-17 21:27:20
173
原创 JavaScript 类型转换的意外
在JavaScript中，类型转换是将一个数据类型转换为另一个数据类型的过程。它可以是显式的，即通过使用特定的转换函数或操作符来实现，也可以是隐式的，即由JavaScript引擎自动完成。为了避免这些错误，新手应该注意理解JavaScript中的类型转换规则，并在比较不同类型的值或进行数学运算时确保类型一致。字符串转换：使用String()函数或toString()方法可以将其他类型的值转换为字符串类型。新手常犯的错误之一是在比较不同类型的值时没有预期到自动类型转换的结果。
2025-02-17 21:25:59
411
原创 什么是原型，有什么用？
原型是JavaScript实现继承的基础，它构成了JavaScript中对象之间的链式关系。1. **属性和方法的继承**：当我们访问对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到对应的属性或方法。3. **构造函数与实例**：在JavaScript中，构造函数的`prototype`属性指向了一个对象，这个对象就是实例的原型。4. **动态性**：可以通过修改原型对象，动态地为已存在的对象添加新的属性和方法，这对于类似继承和扩展的需求非常有用。
2025-01-17 07:57:33
187
原创 http和https分别是什么？区别是什么？
HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS。HTTP不提供任何加密，它是明文传输的，因此数据在传输过程中可能被窃取或篡改。而HTTPS使用SSL/TLS加密所有传输的数据，因此数据在传输过程中是安全的，不易被窃取或篡改。HTTPS开发的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP和HTTPS是两种常见的网络协议，用于在Web上进行数据传输。3.端口：HTTP的默认端口是80，而HTTPS的默认端口是443。
2025-01-17 07:56:03
2754
原创 ES6更新的内容中什么是proxy
Proxy 是 ES6（ECMAScript 2015）中引入的一个新的内置对象，用于定义某些操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。通过创建一个对象的 Proxy，你可以控制对这个对象的访问，包括读取属性、设置属性、枚举属性、函数调用等。处理器对象可以定义零个或多个捕获器（trap），这些捕获器是定义在处理器对象上的特定函数，用于拦截并处理目标对象上的操作。Proxy 是一个非常强大的特性，它允许开发者以声明式的方式拦截和修改对象的操作，从而提供了高度的灵活性和控制力。
2025-01-16 21:56:43
205
原创 JS实现简单的前端分页功能
根据 currentPage 与 totalPages 的对比，禁用或启用“上一页”、“下一页”按钮。例如，如果当前页为1，就应当禁用“上一页”按钮，如果当前页为最后一页，就应当禁用“下一页”按钮。当用户点击“上一页”、“下一页”时更改 currentPage，并调用 renderPage() 和 updateButtonStates()。当用户在输入框中输入页面号并点击“跳转”时，验证该页码是否在合法范围内。上一页、下一页导航：用户可以通过点击“上一页”或“下一页”按钮在数据列表中前后翻页。
2025-01-08 21:50:22
388
原创 如何修改对象的键名
在JavaScript中，对象的键名（也称为属性名）在对象被创建后通常是不可以直接修改的。不过，你可以通过几种方式间接地达到修改键名的目的。以下是一些常见的方法：1. 使用新的键名并删除旧的键名这是最直接的方法，你可以创建一个新的属性，并将旧属性的值赋给它，然后删除旧属性。
2025-01-08 21:40:57
206
原创 CSSmodule的作用是什么
这意味着每个样式定义只在其所属的模块内部有效，不会与其他模块的样式发生冲突，从而有效地避免了全局样式污染的问题。它通过将CSS文件视为一个模块，其中的样式被视为模块的内部属性，从而实现了样式的局部作用域和模块隔离。综上所述，CSS Modules通过解决全局样式污染问题、提高代码的可维护性、可读性和稳定性、支持动态样式和主题切换、与现代前端框架集成良好、提供局部作用域和模块隔离以及自动生成唯一类名等特性，为前端开发带来了诸多便利和优势。这个类名通常是由模块名和样式名组合而成的，具有很高的辨识度。
2024-12-29 10:23:45
460
原创 react为什么修改值后直接获取不是最新的
然而，直接在修改状态后尝试获取DOM或计算基于新状态的值可能不会立即反映出最新的状态，原因主要在于React的异步更新机制。React的setState方法是异步的，这意味着当你调用setState时，React并不会立即更新组件的状态和重新渲染组件。由于setState是异步的，如果你在调用setState后立即尝试获取DOM或基于新状态的值，你可能会得到旧的值，因为React还没有完成状态的更新和组件的重新渲染。可以在组件渲染到屏幕后执行一些副作用操作，如获取最新的DOM或基于新状态的值执行某些操作。
2024-12-29 10:22:47
446
原创 如何进行js后台框架搭建（树形菜单，面包屑，全屏功能，刷新功能，监听页面刷新功能）
框架功能是后台高亮不可缺少的功能，基本上所有的后台都需要框架功能，下面是我制作好的一个效果图下面是我的框架里面功能的具体讲解，还有完整的代码示例。
2024-12-21 13:53:01
1126
原创 js后台框架锁屏功能制作
2.在后台框架点击锁屏按钮，存储一个变量，设置它值为1，设置这个存储的变量是为了在显示框架页面的时候，判断是否有这个存储，如果有这个存储的变量，跳转到到锁屏页面，否则不跳转页面，点击锁屏跳转到锁屏页面，进入锁屏判断存储变量的值是否等于2，如果等于2跳转到框架页面。1.我们要获取到时候的密码，在登录成功的时候，通过存储，存储一下密码框的value。我们为什么要使用锁屏功能，因为锁屏功能可以帮助我们进行隐私的保护。下面是在锁屏判断存储是否跳转到框架页面。下面是在框架判断存储是否跳转到锁屏页面。
2024-12-21 09:20:31
293
原创 JS CSS HTML 的代码如何快速封装
我们为什么要封装代码，是因为封装后的代码，会显得非常美观，减少代码的复用，方便我们更好的去维护代码，不用一个一个页面的去找去改，直接封装好的代码里面去改就可以了。
2024-12-20 20:04:05
682
原创 JS子页面调用父页面函数，监听刷新事件
我们先来说说什么是子页面，在我这里子页面就是域名一样，然后使用iframe引入的页面就是我所说的子页面我们可以通过这个方法来调用父页面的函数后面写上一个点，点的后面写你要调用的父页面的函数，也可以通过调用的父页面的函数在它的小括号里面传你想传入的参数，在父页面可以使用行参来获取子页面传过来的参数。
2024-12-20 17:14:54
307
原创 js导出Excel（图片大小，数据转换，导出后面添加现在的时间 ）
这一块的代码是用来获取接口数据，如果有的接口数据需要改变值，可以通过for循环switch判断改变接口数据里面你想改变的值，让它变成你页面渲染的内容。title是导出表格的表头，key是根据数据返回的键名导出键值的内容，type是类型，比如文字就是‘text’类型，图片是‘image’类型。这个是用来把获取的数据通过上面的代码导出。其中的这个代码是用来调整图片的样式。这个是用来获取当前的时间。上面代码的完整的样式是。
2024-12-20 14:29:23
265
原创 前端HTML，CSS，JS代码优化的方法
html一样的弹出窗如果是内容不一样可以在html写出应该样式，通过js获取div的id，渲染去改变里面的内容或者颜色，比如是说新增和编辑的弹出窗，还有错误和成功的提示框。好多个页面都有一样的样式，就可以把这些样式封装到应该css文件里面，在每个html引入就可以了，比如说body的背景色，弹出窗的样式。一些页面通用的没有接口请求的js代码，可以像css一样生成应该js文件把通用的js代码封装到这个生成的js文件里面。使用css变量可以减少重复代码，提高代码的可维护性，并且可以在需要时轻松更改全局样式。
2024-12-19 21:14:07
248
原创 js分页功能
选择下拉框的选项，设置选择的选项为选中状态，获取选择的选项的value赋值给全局数量的变量，然后调用渲染函数改变页面渲染数据的数量，总页数也会根据每页显示的条数进行改变。点击页码， 让页数的全局变量等于点击的页数，调用渲染显示点击的页码高亮，改变页码渲染的数据。点击左箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据。点击右箭头图片，调用数据渲染函数，显示上一页页码的高亮，改变页面渲染的数据。然后是搜索页码，调用数据渲染函数，改变页码的高亮显示，改变分页渲染的内容。通过获取数据渲染页面。
2024-12-19 17:54:20
503
原创 JavaScript学习难点
这意味着在一个函数内部定义的变量在函数外部是不可见的，但在一个代码块（如 if 语句、for 循环）内部定义的变量在代码块外部仍然是可见的。在上面的代码中，sayHello函数中的this指向obj对象，但是在嵌套函数nestedFunction中，this指向全局对象（在浏览器中是window对象）。例如，在 JavaScript 中，封装通常通过使用闭包来实现，继承可以通过原型链或 ES6 的类继承来实现，多态可以通过函数重载和重写来实现。如果字符串不能转换为有效的数字，结果可能会出乎意料。
2024-12-16 17:45:29
841
原创 图表的放大和刷新功能
图表放大功能代码展示，显示这个图表放大的div，图表放大的时候一定要注意配置项是否清空，如果之前在其它图表放大使用了这个配置项变量没有清空，可能会导致全屏的样式有所改变，然后重新给这个配置项的变量赋值，判断它可以使用哪一个放大的方法去放大。监听判断页码是否是从全屏退了出去的，如果是那就隐藏放大全屏的div，存放图表的div。图表退出全屏代码展示，判断可以使用什么方法，来进行退出全屏。注意：放大的时候一定要。
2024-12-16 15:33:09
439
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人