- 博客(57)
- 收藏
- 关注
RSS订阅原创 小兔鲜网页案例
摘要：本文实现了一个页面导航系统，主要功能包括：1)根据页面滚动位置显示/隐藏电梯导航栏；2)吸附式顶部导航栏，在滚动到指定位置时显示；3)页面滚动时自动高亮当前对应模块；4)点击返回顶部按钮功能；5)点击导航项自动跳转并高亮对应模块。通过动态计算元素位置(offsetTop)和滚动位置(scrollTop)，结合DOM操作和事件监听，实现了流畅的页面导航交互效果。代码采用了条件判断、循环遍历及事件代理等技术，确保功能完整性和性能优化。
2025-07-10 11:19:06
241
1
原创 BiLiBiLI导航栏滚动条案例
本文展示了一个仿Bilibili移动端网页的HTML结构和CSS样式。页面采用响应式设计，包含顶部导航栏（logo、搜索、用户头像）、频道菜单栏（带滑动指示线）、视频列表（两列布局，含封面图、播放量等数据）和底部下载按钮。核心功能是通过JavaScript实现频道菜单栏的滑动指示线效果，当点击不同频道时，红色指示线会平滑移动到对应位置。CSS采用vw单位实现移动端适配，并运用flex布局、阴影效果、渐变背景等现代样式技术。整个页面结构清晰，功能完整，呈现了典型的视频网站移动端UI设计。
2025-07-10 10:57:42
154
原创 阻止默认行为
摘要：本文介绍了两种阻止默认事件行为的方法：使用preventDefault()阻止表单提交和链接跳转，以及移除事件监听器的技巧。通过代码示例展示了如何实现：(1) 验证表单输入为空时阻止提交；(2) 阻止链接跳转并弹出提示；(3) 两种移除事件监听的方式（L2用removeEventListener，L0用null赋值）。还对比了两种事件注册方式的区别：传统on注册会覆盖同名事件且仅支持冒泡，而addEventListener支持捕获/冒泡阶段且不覆盖同名事件。注意匿名函数无法被解绑。
2025-07-07 11:11:18
297
原创 事件委托版本tab栏切换
这是一个使用事件委托实现的Tab栏切换效果。代码包含HTML、CSS样式和JavaScript交互逻辑。Tab栏包含5个导航项（精选、美食、百货、个护、预告）和对应的内容区。通过鼠标悬停事件，JavaScript动态切换active类实现内容切换效果，避免为每个导航项单独绑定事件，提高了性能。CSS样式定义了Tab栏的布局和交互状态下的样式变化。
2025-07-07 10:40:40
156
原创 事件流--阻止事件冒泡
摘要：本文介绍了DOM事件流的两个阶段（捕获和冒泡）及其特点。事件捕获从根元素向内触发（需手动设置），而事件冒泡默认存在，由当前元素向外传播。通过addEventListener的第三个参数控制触发阶段。文章重点讲解了如何用stopPropagation()阻止事件冒泡，并提供了完整示例代码：当点击子元素时只触发子元素事件，不触发父元素事件。事件冒泡是实际开发中的主要应用方式。
2025-07-04 16:59:10
470
原创 tab栏切换
这是一个tab栏切换效果的HTML代码实现。主要功能包括：1)通过CSS设置了590×340px的tab容器和60px高的导航栏样式；2)导航栏包含"精选、美食、百货、个护、预告"5个选项；3)使用JavaScript实现鼠标悬停切换功能，当鼠标经过不同选项时，会高亮显示当前选项并切换对应的内容区域；4)采用排他思想，每次只显示一个tab内容。代码结构清晰，包含完整的HTML、CSS样式和JavaScript交互逻辑。
2025-07-04 10:34:48
161
原创 如何通过JavaScript实现按钮点击切换样式效果
这段HTML代码展示了如何通过JavaScript实现按钮点击切换样式效果。页面包含4个按钮，其中第一个按钮初始带有粉色背景样式。当用户点击任意按钮时，脚本会先移除当前被选中按钮的粉色样式，然后为当前点击的按钮添加粉色背景类。这通过querySelectorAll获取所有按钮，遍历添加点击事件监听器实现，每次点击时先清除之前选中的按钮样式，再为当前按钮添加样式类，实现单选按钮的视觉效果。
2025-07-02 10:41:21
164
原创 如何实现发布评论
本文介绍了如何实现评论发布功能。通过JavaScript监听回车键和点击事件，当用户按下回车或点击发送按钮时，将文本框内容显示在评论模块中，并清空输入框。代码包含完整的HTML、CSS样式和JavaScript逻辑，实现了评论框的显示/隐藏、字符计数等功能。效果图展示了用户"清风徐来"发布的示例评论。整体实现包括：文本域获得焦点显示字数统计、输入时实时更新字数、回车或点击发布按钮提交评论并重置输入框等功能。
2025-06-30 09:38:51
178
原创 发布评论-----统计用户输入字数
本文展示了一个简洁的HTML评论发布界面，包含以下功能： 响应式布局，宽度在400-800px之间自适应 文本输入框聚焦时显示字符计数器（0/200字），失焦时隐藏 输入框随聚焦状态动态变化高度和背景色 包含示例评论模板（显示用户名、内容、发布时间） 通过JavaScript实现实时字符计数功能 界面设计简洁美观，包含用户头像、发布按钮和评论列表区域，适合作为基础评论模块使用。
2025-06-24 10:30:40
241
原创 焦点事件----搜索框案例
这是一个实现小米搜索框显示/隐藏功能的小案例。当用户点击搜索框获得焦点时，会显示下拉菜单列表（包含"小米11"、"小米笔记本"等商品链接），同时将搜索框边框变为橙色；当失去焦点时隐藏下拉菜单并恢复默认边框样式。案例使用HTML搭建结构，CSS设置样式，通过JavaScript监听focus和blur事件来控制显示/隐藏效果。整体布局简洁，实现了基本的搜索框交互功能。
2025-06-24 09:48:38
150
原创 点击事件案例
本文展示了一个王者荣耀登录弹窗的关闭功能实现案例，包含完整的HTML代码。通过CSS定位创建了一个居中显示的弹窗div，并添加了右上角的关闭按钮。JavaScript部分使用querySelector获取元素，并为关闭按钮添加点击事件监听器，点击后将弹窗隐藏（display:none）。代码简洁地演示了网页弹窗的交互实现原理。
2025-06-20 15:00:16
165
原创 轮播图各类切换场景
本文实现了一个功能完善的轮播图组件，主要包含以下功能：1.左右按钮实现图片无缝轮播，通过取模运算处理边界值；2.设置3秒自动轮播的定时器；3.鼠标悬停时暂停轮播，离开后恢复；4.点击小圆点可跳转对应图片。代码采用了模块化设计，将图片切换、文字更新、样式变更等操作封装为toggle函数，提高了代码复用性。整体采用HTML/CSS/JavaScript实现，包含完整的DOM操作和事件绑定逻辑。
2025-06-02 11:45:38
358
1
原创 显示随机图片
本文展示了一个简单的HTML代码示例，用于在网页中随机刷新图片。代码通过JavaScript实现，首先定义了一个包含多个图片路径的数组，然后使用Math.random()方法生成随机数，从数组中随机选择一个图片路径，并将其赋值给<img>标签的src属性，从而实现图片的随机显示。此方法适用于需要在网页中动态展示不同图片的场景，代码简洁且易于实现。
2025-05-19 14:56:38
141
1
原创 随机抽奖
这段代码实现了一个简单的年会抽奖页面。页面布局包括一个背景图片和三个奖项（一等奖、二等奖、三等奖）的展示区域。通过JavaScript，代码从预定义的人员名单数组中随机选取获奖者，并将结果显示在对应的奖项位置。每次抽奖后，已获奖者会从名单中移除，确保不会重复获奖。页面样式通过CSS设置，背景图片居中显示，奖项文字颜色为红色。整体设计简洁，适合用于年会等活动的抽奖环节。
2025-05-19 14:07:22
284
1
原创 手风琴效果
这段HTML代码展示了一个简单的图片展示效果。通过使用Flexbox布局，创建了一个包含多个图片的容器，每张图片的宽度默认为120px，并在鼠标悬停时扩展至400px。代码中，图片路径通过JavaScript动态生成，并插入到HTML结构中。开发者可以根据需要替换图片路径，以实现自定义的图片展示效果。整体代码简洁，适合用于创建响应式的图片画廊或展示区域。
2025-05-13 14:12:28
144
原创 根据输入的数据渲染柱形图
本文介绍了一个基于HTML和JavaScript的动态柱形图生成代码，用于展示不同季度的销售额。用户通过输入四个季度的销售额，代码将这些数据存储到数组中，并根据数组生成相应的柱形图。柱形图通过CSS样式进行美化，包括渐变背景、悬停动画等效果，使数据展示更加直观和吸引人。代码的核心功能包括用户输入数据的收集、数组的处理以及动态生成柱形图并渲染到网页中。该工具适用于需要快速可视化季度销售数据的场景，帮助用户直观比较各季度的销售表现。
2025-05-13 14:08:46
400
原创 两个开关控制一盏灯
开关控制灯最为普遍、简单的做法是用一个开关控制一盏灯，除此之外，在某个位置需要用两个开关控制一盏灯，这就是双联控制。灯的双联控制，在传统上要用到2个单刀双联开关，其电气原理图如下图一所示。图中若开关未被按下时，触点1-2接通，此时由于开关S1触点[3]（或[1]）与S的触点1(或3)相连，两开关成交叉连接，回路(L→S1→S2→EL→N)不通，故灯EL不会亮。当开关S1或S2中某个被按下时，触点3-2接通，回路接通灯就亮了。若再按下开S1或S2中某个，回路断开灯就灭了，实现了双联控制。
2024-05-07 11:29:44
3962
原创 低压电器及选型
低压电器的种类繁多，用途广泛。按所控制的对象分为低压配电电器与低压控制电器。前者主要用于配电系统中，对此类电器的要求是工作可靠，有足够的动稳定性和热稳定性。这类电器有刀开关、熔断器、断路器等。后者主要用于电力拖动自动控制系统和用电设备中，要求这类电器工作准确可靠、操作频率高，寿命长。主要有接触器、控制继电器，主令开关、启动器、电磁铁等。
2024-05-06 17:22:09
1751
原创 Shell教程基础
在 Shell 中，用括号来表示数组，数组元素用"空格"符号分割开。数组名=(值1 值2 ... 值n)或者value0value1value2value3。
2024-04-28 16:18:31
1051
原创 SQL基础教程详解
SQL(Structured Query Language:结构化查询语言)是用于管理关系数据库系统。SQL的范围包括数据插入、查询、更新和删除，数据库模式创建和修改，以及数据访问控制。
2024-04-28 10:15:38
906
1
原创 CSS基础---新手入门级详解
CSS指层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中是为了解决内容与表现分离的问题外部样式可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样，样式通常保存在外部.css文件中，我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和改观。
2024-02-11 21:06:24
1728
2
原创 HTML基础--新手入门级教程
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
2024-02-07 14:57:56
1165
4
原创 HTML系列 -＞ ＜meta charset=“utf-8“＞
meta>标签可以定义文档的各种元数据，提供各种文档信息，可以理解为提供了关于网站的各种信息。例如：针对搜索引擎和更新频度的描述和关键词，再比如，加入meta描述，方便用户去阅读，同时可以在搜索结果中增加点击率。1>默认值为default（白色），可以定义为black（黑色）和black-translucent（灰色半透明）。标签是网页代码中区的一个关键标签，所提供的信息用户不可见，但是文档中最基本的元信息。charset是标签的一个属性，是用来定义文档的字符编码。
2024-02-04 15:26:29
3534
2
原创 set-ExecutionPolicy‘ 不是内部或外部命令 cnpm : 无法加载文件 C:\Users\XXX
在验证pnpm版本时，提示系统禁止运行脚本打开cmd配置时依旧有问题。
2022-10-24 15:40:09
1034
原创 Vue中，子组件如何访问祖先组件中的数据
任何后代的组件树，无论层级有多深，都可以**注入**由父组件提供给整条链路的依赖。这里，组件本地化了原注入名 `"message"` 所提供的的属性，并将其暴露为 `this.localMessage`。祖先提供了暴露的数据，在使用该数据的子组件中我们需要注入之后才能使用
2022-10-21 16:53:32
606
原创 前端vue计算属性
此段代码是将名和姓进行拼接，设置性和名的初始值为空，通过调用getter和setter方法，将值返回到fullname文本框内。
2022-10-13 15:20:03
241
原创 前端技术栈----教程
什么是前端？前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境。
2022-10-08 20:55:13
435
1
原创 计算机指令系统
立即寻址的特点是操作数本身设在指令字内，即形式地址A不是操作数的地址，而是操作数本身，又称之为立即数。数据是采用朴码形式存放的，它的优点在于只要取出指令，便可立即获得操作数，这种指令在执行阶段不必再访问存储器
2022-10-06 16:01:38
1929
1
转载 MyBatis-Plus教程
MyBatis-Plus （简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。：采用代码或者Maven插件可快速生成Mapper、Model、Service、Controller层代码，支持模板引擎，更有超多自定义配置等您来使用。：内置通用Mapper、通用Service,仅仅通过少量的配置即可实现单表大部分CRUD操作，更有强大的条件条件构造器，满足各类使用需求。：通过Lambda表达式，方面的编写各类查询条件，无需再担心字段写错。
2022-09-22 21:47:37
183
原创 MyBatis应用实战 2
二级缓存：全局缓存：global caching 可以被所有sqlsession共享的，需要在配置文件中说明。可以存取对象的任意属性，调用对象的方法，遍历整个对象的结构图，实现字段类型转化等功能。
2022-09-20 15:25:57
217
原创 MyBatis应用实战
mybatis是基于半自动化的ORM映射的框架，内部已经完善了之间的映射。在显示学生信息的同时显示当前学生所在年级名称该如何映射？使用resultMap可以自定义映射关系
2022-09-17 16:04:59
723
原创 Spring入门
Spring是一个从实际开发中抽取出来的框架，企业级应用开发的“一站式”选择，贯穿表现层、业务层和持久层。具有高开放性，并能与其他框架无缝整合，俗称“ 架构粘合剂 ”。
2022-09-11 22:07:26
133
原创 用idea编写JDBC并获取数据库连接信息
使用idea新建Meaven项目（需要在idea中配置Maven）,打开idea，打开设置中心，选择maven，并修改为我们自己创建的maven路径和仓库的路径，如图所示。新建一个项目，选择当前项目使用的JDK，如果没有就点击new,新建并关联到我们自己安装的JDK上，如图所示。经常修改编译很麻烦，我们可以借助属性文件，在不。图中 Maven home directory:指的是maven的安装路径。在执行的时候，非法拼接了，从而使得系统无法进行安。注意：mysql8的驱动，使用时需要指定时区。
2022-09-07 21:33:07
1704
原创 MYSQL常用函数
字符串函数：对字符串、二进制数据或表达式执行操作（可用于binary和varbinary数据类型列，但主要用于char和varchar数据类型）SQL中包含七种类型的函数：聚合函数、转换函数、日期函数、数字函数、字符串函数、系统函数、文本和图像函数。ROUND() 随机返回的到之间的近似浮点值，可以对seed指定为整数表达式。时间和日期函数 ：处理日期和时间（由于不能直接执行算术函数，所以日期函数很重要）聚合函数及分类函数：返回汇总值（对其应用的每行集返回一个值）ABS() 返回数值表达式的绝对值。
2022-09-07 14:54:07
246
原创 用CSS+JS+HTNL仿原神官网
CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象。
2022-09-03 17:31:25
4280
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人