JavaScript - 召田最帅boy

微信公众号API+Redis实现内容访问控制

本文介绍基于微信公众号验证码的文章全文解锁方案。未关注用户只能看到文章前1/3，底部按钮引导关注并发送关键词“博客”。后端 Spring Boot 生成 6 位数字验证码，存入 Redis（5 分钟 TTL，单次有效），微信服务器推送用户消息并返回验证码。前端使用 CSS 截断+遮罩实现预览，验证成功后通过 LocalStorage 标记全局解锁状态，实现持久化。文中提供完整系统架构、关键代码实现及详细步骤。

2026-03-26 16:05:09 阅读

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

本文介绍在博客中实现“部分展示+验证解锁”的阅读限制功能。通过自动计算文章高度，仅显示前1/3，并在底部加入虚化遮罩和“查看全文”按钮，引导用户扫码关注公众号、发送关键词获取验证码。核心实现包括：HTML 结构划分内容、解锁区和验证弹窗；CSS 使用 max‑height 与自定义变量控制截断高度、平滑过渡和视觉遮罩；JavaScript 负责全局解锁状态存储、动态计算1/3高度、验证码校验及解锁动画。实现要点强调高度计算技巧、CSS 变量动态设置、动画平滑以及 localStorage 持久化。文末提出后端 API 验证、微信自动回复、验证码有效期、统计分析和 A/B 测试等后续优化方向。

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

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

在博客底部的“每日一句”板块加入英文音频播放功能。通过有道词典的每日一句API获取 voice URL，后端提供 /api/daily-quote/voice 代理接口解决 CORS 跨域。前端新增圆形播放按钮，配合 CSS 动效显示播放/暂停状态，使用 HTML5 Audio 实现音频加载、播放、结束回调，并在 DOMContentLoaded 后绑定事件。解决了跨域、DOM 加载时机和移动端样式适配等问题，最终实现点击播放、再次点击暂停、播放结束自动恢复的交互效果，提升了用户体验。

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

博客文章分享卡片功能设计与实现

本文阐述了在个人博客中实现分享卡片的完整方案。首先明确需求：点击按钮弹出卡片，展示标题、摘要、时间、作者并生成可扫二维码，支持保存为图片且自适应 PC 与移动端。随后给出 HTML Overlay 结构、Canvas 绘制核心流程（包括高清双倍缩放、背景、文本、二维码绘制），并实现自定义换行函数以控制行数和省略号。采用 qrcode.js 异步生成二维码，利用 Canvas toDataURL 实现图片下载。还提供了简约 UI 设计细节、配色、字体排版以及响应式 CSS。最后列出性能优化要点，指出文本换行、二维码绘制和多端适配为关键难点，整体实现了一个体验友好、功能完整的博客分享卡片。

2026-03-12 17:48:11 阅读

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

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

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

Spring Boot博客系统集成AI智能摘要功能实战

本文演示在 Spring Boot 博客系统中集成 AI 自动摘要功能。通过前后端分离，Thymeleaf 页面调用后端 `/api/ai-summary`，后端构建提示词并使用兼容 OpenAI 的接口（如智谱 AI、Moonshot）生成 200 字以内的摘要。实现了 `AiSummaryService` 接口与实现类、REST API、配置项以及异常降级至本地关键词摘要。前端采用打字机动画展示摘要，提供相应的 HTML、CSS 与 JavaScript 实现细节，并支持多家国内 AI 服务商，显著提升文章阅读体验。

2026-03-12 09:31:47 阅读

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

本文详细教程展示如何在博客底部实现“每日一句”功能，使用 Spring Boot 后端代理有道词典 API，并通过 ConcurrentHashMap 按日期缓存当天句子，防止频繁调用；前端采用原生 JavaScript 与 localStorage 再次缓存，实现双层缓存降级方案，确保 API 不可用时仍有备用句子。配合 CSS3 响应式布局和文字省略/点击展开交互，使组件在桌面、平板、手机等不同宽度下自适应显示。全文提供完整后端控制器、缓存实现、异常处理、HTML 结构、样式代码及交互脚本，帮助读者快速落地该功能。

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

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

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

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

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

文章回顾了博客留言板从纯文本表情代码（[:表情名:]）到所见即所得图片显示的技术演进。最初方案存储简洁但用户需记忆70余代码、交互不直观、错误率高。重构后采用 contenteditable <div> 结合代码↔图片转换层，实现实时同步、光标精准插入，并通过动态生成的表情面板提供点击选择。回复框、移动端响应式布局、触摸事件、懒加载与防抖等优化提升了性能。对比数据显示查找时间、错误率、满意度等指标均显著改善。文章还说明了跨浏览器兼容与图片加载失败的处理方案。

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 按情感、手势、动物、饮食、地点、设备等细分，并给出完整的按钮布局和少量 CSS/JS 交互示例，帮助开发者快速构建可扩展、易维护的表情选择组件。

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

基于-webkit-line-clamp的评论折叠组件开发

本文以评论折叠组件为例，阐述在长文本展示场景下的需求与实现思路。通过 CSS 的 -webkit-line-clamp、display:-webkit-box 与伪元素渐变遮罩实现多行截断并提供视觉提示；利用 JavaScript 根据 scrollHeight 与 clientHeight 动态添加/移除 collapsed 类，控制展开/折叠按钮的显示，并在窗口 resize 时重新判断折叠状态。文中还提供了行数可配置、兼容性处理、事件委托防抖等优化方案，强调安全防 XSS。该组件可快速应用于社区评论、文章摘要等长文本折叠需求。

2025-08-22 10:09:02 阅读