HTML

浏览该分类下的所有文章

博客文章“部分展示+验证解锁”实现

本文介绍在博客中实现“部分展示+验证解锁”阅读限制的完整方案。通过自动计算文章高度，仅显示前1/3并加底部虚化遮罩，配合“查看全文”按钮触发验证弹窗。用户扫码关注公众号、发送关键词获取验证码，校验成功后在本地存储全局解锁标识，文章平滑展开并显示成功动画。实现核心包括HTML结构划分、CSS变量控制截断高度与过渡、JS负责高度计算、锁定/解锁逻辑及验证码校验。文中还提供响应式布局、全局解锁持久化及后续优化建议，如后端API动态验证码、微信自动回复、有效期控制、数据统计和A/B测试等。

2026-03-26 10:55:33 阅读

输入QQ号自动获取昵称

实现了在博客评论和回复框输入QQ号后自动获取昵称、头像并填充的功能。采用 uapis.cn 提供的 QQ 信息接口，使用正则校验和 jQuery AJAX 异步请求，失焦时触发。经过多接口对比后选定该稳定接口，并在友情链接/留言板和文章详情页完成集成。实现了前端格式验证、错误日志、跨域支持，并提出缓存、加载提示、备用接口及后端代理等优化建议。该功能简化了评论流程，显著提升用户体验。

2022-08-15 19:23:06 阅读

AI对话机器人技术实现文档

实现基于 Web 的 AI 对话机器人，嵌入博客文章页面，提供文章上下文的智能问答。核心功能包括打字机逐字显示、生成过程暂停/继续、对话历史本地持久化、快捷预设问题及响应式布局。前端采用原生 HTML5、CSS3、JavaScript，配合 Marked.js 解析 Markdown、Highlight.js 代码高亮、Font Awesome 图标；后端通过 RESTful API 调用 AI 服务，数据存储使用 LocalStorage。系统划分为界面层、交互层、数据层和服务层，采用状态机管理 idle、thinking、generating、paused 等状态。针对打字机与 Markdown 同步、暂停状态持久化、多状态切换不一致等难点，分别实现增量渲染、保存暂停标记和统一状态变量等解决方案。

2026-03-17 15:54:44 阅读

为博客每日一句添加音频播放功能

为博客底部的“每日一句”添加英文音频播放功能。通过有道词典每日一句API获取 voice URL，后端实现 `/api/daily-quote/voice` 代理接口解决 CORS，前端加入圆形播放按钮、CSS 动画和播放状态反馈，使用 HTML5 Audio 管理播放、暂停及结束事件，并处理 DOM 加载时机和移动端样式适配。实现后，点击按钮即可播放或暂停音频，播放中按钮呈粉色脉冲动画，兼容 PC 与移动端，提升访客的英语学习体验。

2026-03-17 10:54:06 阅读

使用自定义图片作为Emoji表情的技术实现

本文介绍在 Web 项目中实现自定义图片 Emoji 的完整方案。首先约定表情图片统一存放于 `/static/img/emoji/`，使用有意义的英文或拼音命名。核心 JavaScript 包括：定义路径和名称列表、利用正则 `\[:([a-zA-Z0-9_\-@]+):\]` 将 `[:表情名:]` 替换为 `<img>` 标签、动态生成表情面板并在编辑器中插入图片、提交前再将 `<img>` 转回文本代码。配套的 CSS 负责内联表情、面板布局及悬停效果，HTML 结构由按钮、面板和容器组成，并通过点击、冒泡控制面板显示。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、分类展示等功能。整体思路是“纯文本存储‑图片展示‑编辑插入‑代码回写”，实现了可扩展、跨平台、风格统一的 Emoji 系统。

2026-03-16 17:11:25 阅读

视觉盛宴：手把手教你实现一个现代化的弹幕墙

本文系统阐述了现代弹幕墙的完整实现方案。首先明确视觉、流畅滚动、防重叠、交互、响应式和状态管理等核心需求；随后基于玻璃拟态风格设计容器和圆角卡片弹幕，并提供六套主题色彩。核心滚动逻辑采用 keyframes 动画结合轨道管理，实现弹幕在不同轨道上的独立运行；通过安全轨道检测和密度自适应调度防止重叠。针对 PC 与移动端的全屏/非全屏场景，制定动态轨道数和居中布局策略，保证在尺寸变化时仍保持美观。交互方面实现速度倍率（0.5‑3×）调节、暂停/播放以及全屏切换时的弹幕清理。最后通过 transform/GPU 加速、对象池复用、事件防抖等手段进行性能与内存优化，确保弹幕墙视觉炫酷、交互流畅、适配广泛。

2026-03-12 11:31:19 阅读

双层缓存+响应式设计：博客每日一句功能完美落地教程

本文详细阐述了在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot + RestTemplate，提供 `/api/daily-quote` 接口，使用 ConcurrentHashMap 按日期缓存当天句子，防止频繁调用有道词典 API，并在异常时返回固定备用句子。前端使用原生 JavaScript 与 CSS3，首次请求后将数据写入 localStorage，实现客户端一天一次的二层缓存；通过 `white-space: nowrap`、`text-overflow: ellipsis` 与 `.expanded` 类实现长句折叠/展开交互。布局采用弹性盒子和媒体查询，在桌面、平板、手机三种断点下自动适配宽度和字号。整体实现了每日更新、降级备份、性能优化和响应式展示，代码可直接复制使用。

2026-03-12 09:24:59 阅读

个人博客的代码块折叠/展开功能

随着技术文章代码示例日益冗长，阅读体验受限，作者实现了零依赖、智能折叠的代码块组件。核心采用 CSS max‑height 过渡实现平滑动画，结合实际渲染的字体尺寸、行高和内边距精确计算折叠阈值，仅对超长代码启用。组件提供语言自动识别、复制按钮、ARIA 可访问属性以及响应式触摸优化。性能测试显示首屏加载下降 11%、交互延迟降 28%、代码占比减半，移动端阅读完成率提升 40%。文中还总结了主题兼容、动画防抖、触控尺寸等实现挑战及对应方案，并给出渐进增强、性能优先、无障碍设计等最佳实践，提出虚拟滚动、状态持久化和结构化折叠等后续优化方向。

2026-02-05 17:46:35 阅读

博客实战：如何实现精准的“邮件直达评论”深层链接功能

本文介绍在 Spring Boot + Thymeleaf 项目中实现高精度评论深层链接的完整方案。通过后端递归计算目标评论的顶级父 ID（Thread ID），在邮件链接中携带 commentId 和 threadId，并保留锚点作降级；前端脚本解析参数，判断评论是否被折叠，自动展开父级、轮询 AJAX 加载、双重滚动修正图片加载导致的偏移，并以 Teal 呼吸灯动画高亮目标。该实现解决了定位失效、隐藏内容和视觉反馈弱等痛点，提升了用户在邮件通知中快速定位回复的体验。

2026-02-04 10:55:46 阅读

留言板表情系统技术实现：从代码输入到直观显示的演进

本文记录了博客留言板表情系统的技术演进：从最初的[:表情名:]文本编码因记忆成本高、交互不直观而体验差，重构为“所见即所得”。采用 contenteditable 替代 textarea 实现图片即时插入，并通过实时双向同步将图片转回代码存入后端；页面加载时解析代码转为 <img>。动态生成表情面板，精确在光标位置插入，兼容回复框及移动端响应式布局与触摸事件。加入懒加载、输入防抖等性能优化，对比数据表明表情使用率、用户满意度显著提升。

2026-02-04 09:07:35 阅读

从A标签跳转后JS失效？我踩过的坑和填坑方法

在博客列表页通过普通 `<a>` 跳转到文章详情时，页面加载正常但灯箱、复制按钮等 JS 功能失效，刷新或直接访问 URL 则一切正常。原因是浏览器在普通跳转时可能复用旧的 JS 环境或缓存页面，导致新页面的脚本未完整重新执行。临时解决办法是给链接加 `target="_self"`，强制完整加载；更根本的做法是改进 JS 初始化时机：在 `DOMContentLoaded`、`load`、`pageshow` 等事件中检查关键元素是否已出现，必要时使用 `setTimeout` 或 `Promise` 等方式等待后再调用 `initLightbox、initCopyButton` 等函数；文中还提供了基于 `PageManager` 的完整初始化管理器，能够在页面恢复、前进/后退等场景下安全重置并逐个等待所需元素。经验教训包括：不要盲目信任 `DOMContentLoaded`，要防御性地检查 DOM，了解浏览器缓存机制，并可考虑使用 `MutationObserver` 监听 DOM 变化。

2026-01-27 15:48:14 阅读

现代Web表情选择器组件：分类系统与实现详解

本文介绍了构建专业级 Web 表情选择器的核心——分类系统与实现。采用 7 大主题分类（表情、人物、动物、食物、旅行、物体、符号），每类配以图标、表情数量（约 70‑90 条）和代表 Emoji。通过 HTML 结构实现标签页与对应面板的切换，并给出每个分类的具体 Emoji 示例代码，展示如何在页面中组织、渲染并交互式展示完整的表情库。文章还说明了作者对原有库的归类与补充工作。

2025-06-28 00:00:31 阅读