HTML - 召田最帅boy

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

实现博客文章“部分展示+验证解锁”：自动截取正文前1/3并加底部模糊遮罩，点击“查看全文”弹出二维码验证弹窗，输入验证码后全站解锁。核心包括三层HTML（内容、解锁区、验证弹窗），CSS 变量控制高度、平滑过渡和遮罩样式，JS 负责获取全文高度、设置 `--content-one-third`、锁定/解锁切换并使用 `localStorage` 保存全局解锁状态。要点强调高度计算技巧、CSS 变量动态赋值、动画过渡、响应式布局。后续可接入后端 API、微信自动回复、验证码有效期及统计分析，以提升安全性和转化率。

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

输入QQ号自动获取昵称

为提升博客评论体验，实现在QQ号输入框失去焦点时自动调用 uapis.cn 接口获取QQ昵称、头像并填入相应字段。核心实现包括正则校验QQ号、使用jQuery $.ajax 异步请求、在主评论表单和回复框中分别绑定 blur 事件调用 fetchQQNickname 函数。经过多接口对比，最终选用信息完整且支持CORS的 uapis.cn API，并在代码中加入错误日志、前端格式校验等安全措施。文中还提出缓存、加载提示、备用接口及后端代理等优化建议。该功能已在友情链接/留言板和文章详情页上线，显著简化用户填写流程，提升交互体验。

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

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

本项目在博客页面实现基于Web的AI对话机器人，提供基于文章内容的智能问答。核心功能包括上下文问答、打字机逐字显示、暂停/继续、对话历史本地持久化、快捷常见问题以及响应式布局。技术选型采用原生HTML5 + CSS3 + JavaScript、Marked.js、Highlight.js、Font Awesome，后端通过RESTful API调用AI服务；数据存储使用LocalStorage。系统分为用户界面层、交互逻辑层、数据处理层和服务接口层，AI生成过程通过状态机管理（idle → thinking → generating → paused → completed）。实现重点在打字机效果与增量Markdown渲染同步、暂停状态持久化及多状态切换的稳定性，均通过增量渲染、历史记录标记和统一状态变量等方案解决。

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

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

本文记录了为博客底部“每日一句”板块添加英文音频播放功能的完整实现过程。首先明确需求：点击播放按钮获取并播放音频，保持页面风格、兼容PC与移动端并提供播放状态反馈。由于有道词典API存在 CORS 限制，采用后端代理接口 `/api/daily-quote/voice` 转发请求并解析返回的 `voice` URL。前端在卡片中加入圆形播放按钮，使用 CSS 设计默认、播放中两种样式并实现响应式适配；通过 HTML5 Audio 对象实现音频加载、播放、暂停及结束事件的状态管理。开发中解决了跨域、DOM 加载时机和移动端样式超出等问题。最终实现点击播放、再次点击暂停、播放结束自动恢复默认状态的交互，提升用户体验，并总结出跨域代理、Audio API 使用及响应式设计等实践经验。

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

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

本文介绍在 Web 项目中实现基于自定义 PNG 图片的 Emoji 系统的完整方案。通过在 /static/img/emoji/ 统一存放表情图片，并采用有意义的英文/拼音命名，使用 JavaScript 定义路径、文件名列表，利用正则 \[:name:\] 将文本代码转换为 <img> 标签实现显示；在编辑器中点击面板插入对应 <img>，提交前再将图片恢复为 [:name:] 纯文本存储。配套 CSS 设定内联表情和响应式面板样式，并提供面板显示/隐藏、点击冒泡控制等交互逻辑。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、按分类展示等功能。方案优势在于纯文本存储便于查询、可随时扩展新表情、跨平台兼容且视觉统一。

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

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

本文系统阐述了弹幕墙的完整实现方案。首先明确需求：现代玻璃拟态视觉、流畅滚动、防重叠、交互控制、响应式适配和状态保持。随后介绍了基于玻璃拟态的 UI 设计、六套主题色以及圆角卡片弹幕样式。核心滚动采用 CSS keyframes 与轨道化管理，利用安全轨道检测和智能调度算法避免弹幕重叠。针对 PC 与移动端不同尺寸，提供动态轨道数计算和居中布局策略，实现全屏/非全屏切换时的轨道重算与越界弹幕清理。交互方面支持 0.5‑3 倍速调节、暂停/播放。性能优化包括 transform 动画 GPU 加速、对象池复用、DOM 移除和事件防抖。整体实现了视觉美观、交互流畅、适配性强的现代弹幕墙。

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

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

本文详细阐述了在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot，使用 ConcurrentHashMap 按日期缓存从有道词典 API 获取的中英文句子，并在请求异常时返回预设降级文案。前端基于原生 JavaScript 与 CSS3，利用 fetch 调用统一的 /api/daily-quote 接口，将当天数据存入 localStorage 防止重复请求，并实现点击展开/收起的交互效果。通过双层缓存（服务端内存 + 客户端 localStorage）显著降低对第三方 API 的调用频率，提升稳定性。文中还提供了针对桌面、平板、手机的响应式布局和断点设置，确保组件在不同终端均能良好展示。整体实现简洁、性能优化且具备容错机制。

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

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

为解决博客中长代码块影响阅读，作者实现了零依赖、智能折叠的代码块组件。采用 CSS max‑height 过渡实现平滑展开/收起，具备语言自动识别、语法高亮、复制、ARIA 可访问性及响应式布局。核心包括基于实际渲染的行高计算、动画防抖锁和 Clipboard API 复制。实验显示首屏加载降低11%、交互延迟降28%、移动端阅读率提升40%。文中还讨论了主题兼容、动画冲突、触摸体验等挑战，并展望虚拟滚动、状态持久化等后续优化。

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

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

本文针对博客邮件通知中“查看回复”只能定位到页面顶部、在折叠或动态加载的评论区找不到目标的问题，提供了完整的深层链接实现方案。后端在生成邮件链接时递归计算目标评论的顶级父评论 ID（Thread ID），并将 commentId、threadId 作为 URL 参数；前端通过 initDeepLink 脚本解析参数，判断评论是否已显示，若被折叠则自动展开并轮询 AJAX 加载完成后滚动定位，采用双重 scrollIntoView 纠正图片懒加载导致的偏移；最后使用 teal 颜色的呼吸灯动画高亮目标并在 5 秒后淡出。该方案实现了定位准确、体验平滑、视觉友好的评论深层链接功能。

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

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

原博客使用[:表情:]文本码，用户需记忆70+符号，交互不直观。通过将<textarea>换成 contenteditable <div>，实现所见即所得：点击表情面板插入 <img>，并实时同步回隐藏的 textarea，以代码形式存库。页面加载时逆向解析代码为图片，兼容移动端并加入懒加载、输入防抖等性能优化。对比后查找时间从 3‑5 秒降至 1 秒，错误率由约15%降至≈0%，用户满意度提升至92%。技术难点主要在跨浏览器 selection 处理和图片加载失败的回退方案。

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

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

从列表页点击<a>跳转到文章详情页时灯箱、复制按钮等JS失效，刷新或直接访问却正常。原因是浏览器复用页面缓存，导致脚本未重新初始化。最简解决方案是给链接加 target="_self"。更根本的办法是让初始化代码具防御性：在DOMContentLoaded、load、pageshow等事件中检查关键元素，必要时轮询或使用Promise等待出现，或通过PageManager统一管理。经验教训包括：不要盲目信任DOMContentLoaded、注意前进/后退缓存、采用防御式初始化或MutationObserver。建议先加target="_self"排查，再改进初始化逻辑。

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

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

文章介绍了一个专业级 Web 表情选择器的实现思路，核心在于将 Emoji 按 7 大主题（表情、人物、动物、食物、旅行、物体、符号）进行分类，每类配以图标、表情数量和代表符号。文中给出完整的 HTML 结构，包括分类标签（emoji-tabs）和对应面板（emoji-panels），并通过示例代码展示各分类下的具体表情按钮实现细节。整体方案强调分类系统的可扩展性和 UI 交互的简洁性，为开发者提供可直接复用的组件模板。

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