- 博客(249)
- 收藏
- 关注
RSS订阅原创 第15课：设计模式——代码的“武林秘籍”
本文介绍了编程中的三大设计模式：单例模式、观察者模式和工厂模式，并通过实战案例展示了如何应用这些模式来提升代码的复用性和可维护性。单例模式确保一个类只有一个实例，适用于全局状态管理等场景；观察者模式通过一对多的依赖关系实现对象间的自动通知，常用于事件系统和实时数据推送；工厂模式封装对象创建过程，适用于UI组件库和复杂对象创建。最后，文章通过一个全局消息通知系统的实战案例，展示了如何结合这些设计模式来解决实际问题。
2025-05-09 10:56:12
315
原创 第14课：小白进阶必看！面向对象编程——用“乐高思维”组装代码
/ 方法（自动挂载到原型）speak() {${this} // 方法（自动挂载到原型） speak() {console . log(` ${ this . name } 发出声音 `);} } const animal = new Animal('小狗');// 小狗发出声音发出声音`);const animal = new Animal('小狗');// 小狗发出声音。
2025-05-09 10:51:46
1079
原创 第13课：小白进阶必看！AJAX与Fetch入门
传统网页：点链接 → 整页刷新（像去店里取餐）AJAX 网页：JS 悄悄发请求 → 局部更新（像外卖小哥送餐到桌）
2025-05-09 10:50:53
94
原创 第12课：小白进阶必看！客户端数据存储—让浏览器记住你的小秘密
青春因奋斗而闪光，梦想因拼搏而绽放！你是否遇到过这样的尴尬：用户填了一半的表单，不小心刷新页面，所有内容都没了？别担心！今天我们就来学习如何让浏览器拥有“记忆”，即使用户关闭页面，数据也不会丢失！最后带大家做一个 「离线也能用的待办清单」，Let’s go！特点： 关掉浏览器数据还在，除非手动删除用法：存对象（需用 JSON 转换）：2. sessionStorage：临时储物柜**特点：**仅当前标签页有效，关闭就消失用法（和 localStorage 一样）：3. Cookie：会自动打包的小纸
2025-05-08 10:56:06
823
原创 第11课：小白进阶必看！JavaScript 模块化与工程化—从脚本到项目
当你面对数千行代码混杂的 HTML、全局变量冲突、手动刷新页面的开发方式时，是否渴望拥有的能力？本节课将带你完成从“草台班子”到“正规军”的蜕变，用 Webpack+Babel 武装项目，最后将天气工具工程化部署！
2025-05-08 10:55:04
889
原创 第 10 课：小白进阶必看！JavaScript 从回调地狱到 Async/Await 的异步编程革命
努力到无能为力，拼搏到感动自己！当你面对层层嵌套的回调、无法定位的异步错误时，是否想过： 为什么处理异步这么痛苦？本节课将带你穿越时空，经历 JS 异步编程的进化史，最后用 Async/Await 开发「天气查询工具」，体验丝滑的异步代码！痛点：优势：优势：状态： pending → fulfilled/rejected（不可逆）链式原理： .then 返回新 Promise，可连续调用3. 并发控制三、Async/Await 实战技巧1. 错误处理标准化2. 并行请求优化3. 突破循
2025-05-07 15:27:56
619
原创 第9课：小白进阶必看！ES6+JavaScript新特性全攻略
2015 年发布的 ES6 是 JavaScript 历史上，它让 JS 蜕变为“工程化语言”。但很多时候面对 () => {}、…等符号仍会懵圈。本课将用解析必学特性，让你读懂并写出优雅的现代 JS 代码！
2025-05-07 15:26:22
835
原创 第8课：JavaScript实战-简易计算器——入门阶段成果验收
恭喜来到「JavaScript 魔法学院」入门阶段最后一课！经过前 7 课的学习，你已掌握 JS 核心基础，今天我们将用 100 多行代码 开发功能完整的计算器，包含加减乘除、连续计算、异常处理能力，最终效果可直接加入个人作品集！
2025-04-25 09:01:17
435
原创 第7课：JavaScript事件处理——JS的“感官系统”
不要害怕前方的黑暗，因为你每走一步，光明就会更靠近你一分。勇敢地迈出今天这一步，用努力点亮未来的路，你比想象中更强大！欢迎来到「JavaScript 魔法学院」第 7 课！如果说网页是人体，那么事件就是 JS 的“感官”——它能感知用户的点击、输入、滑动等行为，让网页“活”过来！今天我们将解密事件机制，并开发「图片画廊」交互特效，代码可直接嵌入个人网站！三要素：监听谁：DOM 元素（按钮、输入框等）听什么：事件类型（click、input 等）做什么：回调函数（事件触发时执行的代码）每个事件处理函数
2025-04-25 09:00:06
383
原创 第6课：DOM操作进阶——网页的“变形术”
给每个按钮绑定点击事件 → 性能差给父元素绑定事件，通过 e.target 识别子元素 → 节省内存。
2025-04-24 10:52:49
949
原创 第5课：对象与类——JS的“信息收纳盒”
欢迎来到「JavaScript 魔法学院」第 5 课！前几课我们学会了用变量存储零散数据，但如果要管理（姓名+年龄+爱好），该怎么做呢？今天的主角就是为这种场景而生！最后带大家用对象开发，Let’s go!
2025-04-24 10:51:55
280
原创 第4课：函数基础——JS的“魔法咒语”
① 函数声明（经典咒语）// 定义咒语console.log(`🔥 火球攻击${// 定义咒语 function fireBall(target) {console . log(` 🔥 火球攻击 ${ target }！`);} // 调用咒语-可多次调用 fireBall("哥布林");// 🔥 火球攻击 哥布林！fireBall("小笨蛋");// 🔥 火球攻击 小笨蛋！！`);// 调用咒语-可多次调用fireBall("哥布林");// 🔥 火球攻击 哥布林！
2025-04-23 14:39:47
1004
原创 第3课：运算符与流程控制——JS的“决策者”
欢迎来到「JavaScript 魔法学院」第 3 课！今天我们将化身代码世界的“指挥官”，用计算数据，用做出决策！文末实战带你用，绝对震撼！
2025-04-23 13:44:59
346
原创 HTML&CSS：全网最全的代码时钟效果
这个页面实现了一个展示多种设计风格时钟的博物馆，每个时钟都有独特的视觉效果。页面使用了 CSS 和 JavaScript 来实现时钟的动态效果和交互功能。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构h1：显示页面标题“Museum of Clocks”。container：包含多个时钟展示卡片。每个卡片如 skeuomorphic、flat-design、material-design
2025-04-22 12:48:07
336
原创 HTML&CSS：看这里，动态背景卡片效果
这个页面实现了一个具有动态背景效果的卡片布局，每个卡片都有独特的背景颜色和光效。页面使用了 CSS 自定义属性和动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构两个 card 元素，每个都代表一个卡片。card__backdrop：定义卡片的背景效果。card__content：包含卡片的内容，如标题、段落等。CSS 样式bod
2025-04-22 12:47:36
731
原创 第2课：变量与数据类型——JS的“记忆盒子”
不经历风雨，怎么见彩虹？无人能随随便便成功，努力吧，你一定会成为那个闪闪发光的人！:::欢迎来到「JavaScript 魔法学院」第 2 课！上节课我们让网页“动”了起来，今天要学习 JS 的——用“记忆盒子”（变量）存储数据，并掌握数据的“分类标签”（类型）。，等你来挑战！
2025-04-22 12:46:43
484
原创 第1课：初识JavaScript——让你的网页“动”起来！
JavaScript：1995 年由 Brendan Eich 用 10 天设计，现已成为全球使用最广的编程语言。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript：网页的“魔法师”，负责让静态页面动起来（比如弹窗、轮播图）。JavaScript：直接运行在浏览器，无需安装环境、支持事件响应（点击、滑动等）、能与 HTML/CSS 无缝协作。
2025-04-22 12:46:07
613
原创 HTML&CSS：超有趣的登录表单
这个页面实现了一个具有 3D 效果和动画的登录表单，包含多个输入框和一个提交按钮。页面使用了 Flexbox 布局和 CSS 动画来增强视觉效果和用户体验。输入框和按钮具有良好的视觉效果和交互体验，包括悬停和聚焦效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-11 10:59:29
858
原创 HTML&CSS：卡片式提交框
这个页面实现了一个简单的订阅表单，包含一个输入框和一个提交按钮。页面使用了Flexbox布局和绝对定位来实现居中显示和装饰效果。输入框和按钮具有良好的视觉效果和交互体验，包括焦点状态和悬停效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-11 10:58:58
551
原创 HTML&CSS：领导说这个开关能打99.99分
这个页面实现了一个具有宇宙风格的3D复选框切换开关，通过CSS动画和3D效果创建了一个现代化的交互界面。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构cosmic-toggle：定义了一个自定义样式的复选框容器。toggle：定义了一个复选框，使用CSS隐藏了默认样式。slider：定义了复选框的滑块部分，包含以下子元素：cosmos：定义了宇宙背景效果。energy-line：定义
2025-04-10 13:41:46
1083
原创 HTML&CSS：这个复选框打几分？
这个页面实现了一个具有霓虹灯效果的复选框，通过CSS动画和过渡效果创建了一个现代化的交互界面。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构neon-checkbox：定义了一个自定义样式的复选框容器。checkbox：定义了一个复选框，使用CSS隐藏了默认样式。neon-checkbox__frame：定义了复选框的框架部分，包含以下子元素：neon-checkbox__box：定义
2025-04-10 13:41:19
1062
原创 HTML&CSS：有个性的复选框
这个页面实现了一个自定义样式的复选框，通过CSS动画和3D效果创建了一个现代化的交互界面。复选框在选中和未选中时显示不同的文本（Yeah!和Nope），并具有良好的视觉效果和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-09 17:28:04
716
原创 HTML&CSS：音乐播放器卡片
这个页面通过 CSS 动画和 Flexbox 布局，创建了一个现代化的音乐播放器界面，具有良好的视觉效果和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构main：是整个页面的主容器，内部包含了一个当前播放的歌曲信息和多个加载动画。currentplaying：显示当前正在播放的歌曲信息，包括一个 SVG 图标和文本。loader：每个元素都包含歌曲名称、艺术家名称、专辑封面
2025-04-09 17:27:29
892
原创 HTML&CSS：3D加载动画的实现
这个页面实现了一个带有两组不同颜色和渐变效果的加载动画。每组动画包含四个加载器，每个加载器都有一个旋转动画和光点效果。页面使用了CSS动画和渐变背景来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构loader-container：包含一组加载动画。loader loader1：定义了一个加载动画，包含一个span元素。loader load
2025-04-08 10:41:45
888
原创 HTML&CSS：用Three.js创造3D书本世界
这个页面实现了一个带有3D动画效果的网页，用户可以看到一个3D场景中的书本随机放置并旋转。页面使用了Three.js库和GSAP库来实现3D效果和动画，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构canvas-container：用于放置Three.js渲染的3D内容。overlay-text：包含覆盖在3D内容上的文本。script：包含页面的Jav
2025-04-08 10:41:13
1002
原创 HTML&CSS：纯CSS实现小游戏动画效果
这个页面实现了一个动画精灵的显示和控制功能，用户可以通过按钮选择不同的动画状态，并通过下拉选择框调整动画的帧率。页面使用了CSS变量和伪类选择器来动态控制动画效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。container：包含整个页面的内容。sprite-wrapper：包含一个动画精灵sprite的容器。spr
2025-04-08 10:40:45
765
原创 HTML&CSS：哇塞！Three.js 打造的 3D 交互平面，鼠标滑动纹理如梦幻般变形！
这个页面实现了一个基于Three.js的3D交互效果，用户可以通过鼠标移动在平面上产生动态的纹理变形和阴影效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。script：包含JavaScript代码，用于实现3D场景的渲染和交互功能。CSS 样式html, body：设置页面的外边距和内边距为0。禁止页面内容溢出，确保全屏显示。JavaScri
2025-04-07 11:43:03
945
原创 HTML&CSS：超好看的收缩展开菜单
这个页面实现了一个具有动画效果的菜单选择框，用户可以通过点击按钮选择不同的菜单选项。页面使用了SVG图标和CSS动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构potion-select potion-select：定义了一个选择框，用于选择不同的图标选项。potion-equipped：定义了一个按钮，显示当前选中的药水。select
2025-04-07 11:42:32
867
原创 HTML&CSS：不一样的开关效果
这个页面实现了一个具有复杂背景效果和立体按钮的简单布局。页面使用了多个径向渐变和线性渐变来创建视觉上丰富的背景效果，同时按钮也通过阴影和渐变效果增强了立体感。页面的整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-03 13:53:46
878
原创 HTML&CSS：你绝对没见过的input输入框，确定不看看吗
这个页面实现了一个带有动画效果的输入框组件，用户可以在输入框中输入内容，并通过清除按钮清除内容。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。url-input：定义了一个输入框组件，包含图标、输入框和清除按钮。icon：包含一个 SVG 图标和一个用于显示网站图标（favicon）的 div。text：包含一个输入框（input），用户可以输入 URL
2025-04-03 13:40:58
1238
原创 HTML&CSS：超丝滑的动态导航菜单
这个页面实现了一个动态的导航图标菜单，通过 CSS 和 JavaScript 实现了图标的交互效果和页面样式的动态改变。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body 标签定义了页面的主体内容。页面的核心是一个导航图标容器 icon__container，其中包含四个导航图标 icon。每个图标由一个图标 i 和一个文本标签 p 组成，文本标签的内容通过 data-content
2025-04-03 13:40:19
716
原创 HTML&CSS：超好看的轮播图，你绝对用得上（建议收藏）
这段代码实现了一个具有现代设计风格的网页，包含响应式导航栏、图片轮播功能和交互式菜单。它结合了HTML、CSS和JavaScript技术，提供了良好的用户体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构使用main标签定义主体内容区域。包含一个图片轮播功能，通过slider和slider-item实现轮播项。每个轮播项包含一个标题、描述和一张图片。提供“上一个”和“下一个”按钮，用
2025-04-02 16:51:58
715
原创 HTML&CSS：必学！手把手教你实现动态天气图标
这段HTML和CSS代码描述了一个动态天气图标集合的效果，通过CSS动画和样式实现了多种天气状态的动态展示。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构h1：页面标题，显示页面的主题内容。icon sun-shower：定义一个动态天气图标，表示“太阳雨”天气，包含云、太阳和雨的组合元素。cloud：表示云的图形元素，通过CSS实现云的形状和动态效果。sun：表示太阳的图形元素，通过
2025-04-02 16:51:23
1208
原创 HTML&CSS：超实用的登录页面（建议收藏）
这段HTML和CSS代码实现了一个具有动态效果的登录表单，包含用户名和密码输入框、提交按钮和加载动画。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构tile：定义整个登录表单的容器，包含头部和表单主体。tile-header：定义表单的头部，包含登录标题。tile-body：定义表单的主体部分，包含输入框和提交按钮。form：定义表单，包含用户名和密码输入框。form-input：定
2025-03-27 11:14:47
364
原创 HTML&CSS：惊了！纯 HTML 打造会 “变脸” 评分界面，交互体验绝了
这个HTML实现了一个简洁而富有交互性的评分界面，通过动态表情反馈增强了用户体验，适用于网页应用中的用户反馈或评分功能。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构container：定义整个页面的容器，包含背景纹理和居中对齐的反馈表单。feedback：定义反馈表单的容器，包含评分系统和表情符号。rating：定义评分系统的容器，包含多个评分选项。radio：定义评分选项的输入框，
2025-03-27 11:14:14
292
原创 HTML&CSS：用户体验必备！表情包结果反馈卡片
这段HTML和CSS代码实现了一个具有动态动画效果的成功和错误提示框，每个提示框包含一个表情图标、提示信息和一个按钮。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构container：定义整个页面的容器，包含成功和错误的提示框。success-box：定义成功提示框的样式，包含动画效果和成功信息。error-box：定义错误提示框的样式，包含动画效果和错误信息。dot：定义小圆点的样式
2025-03-26 17:00:53
755
原创 HTML&CSS：动态切换简介卡片，面试官一眼记住你
这段HTML和CSS代码实现了一个具有动态交互效果的个人简介卡片，包含多个部分（如“关于”、“工作经验”和“联系方式”），用户可以通过底部的按钮切换不同的内容区域。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构card：定义卡片的主体部分，包含头部、主要内容区域和按钮。card-header：定义卡片的头部，包含封面、头像、全名和职位。card-cover：定义卡片的封面，通过backg
2025-03-26 16:56:59
1437
原创 HTML&CSS：必看！3D 书籍展示，封面 “自动翻开” 超带感
这段HTML和CSS代码实现了一个具有3D效果的书籍展示页面，包含书籍的封面、页面和书脊。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构component：定义整个书籍展示的容器。align：定义书籍的外层容器，包含一个li元素。li：定义书籍的容器，包含封面、页面和书脊。book：定义书籍的主体部分，包含封面、页面和书脊。hardcover_front：定义书籍的封面部分，包含两个
2025-03-26 16:56:12
724
原创 HTML&CSS：速看！手把手教你实现超酷的动态滑动卡片（建议收藏）
这段HTML和CSS代码实现了一个具有动态滑动效果的卡片式图片展示页面，包含三个不同的图片和对应的内容描述。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构radio：定义图片切换的控制按钮，通过name属性实现单选效果。checkbox：定义图片放大切换的控制按钮。slider：定义滑动按钮的容器，包含三个滑动按钮。label：定义滑动按钮，通过for属性绑定对应的input>。in
2025-03-24 14:12:15
1170
原创 HTML&CSS：必学！跳跃的动态标题
这段代码实现了一个动态的标题效果，其中每个字母依次跳动，营造出一种活泼的视觉效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-03-24 14:10:21
496
空空如也
想做一个分享前端内容的公众号，没有浏览量怎么搞？
2024-10-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人