工具核心特点：安全与便捷并存

1. 纯前端实现，密钥永不离本地
   所有计算均在浏览器中完成，Base32 密钥仅在本地内存中处理，不会通过网络上传至任何服务器，从根本上杜绝密钥泄露风险。
2. 实时 30 秒倒计时可视化
   通过动态圆环进度条和数字倒计时，直观展示当前验证码的有效剩余时间，避免因过期导致验证失败。
3. 无需注册，即开即用
   打开网页即可使用，无需注册账号、无需安装插件，适配 PC 与手机端，临时需要验证时随用随开。
4. 中文友好，界面简洁
   修复了初始版本的中文乱码问题，界面清晰直观，输入密钥后一键生成，即使是技术新手也能轻松上手。

如何使用：3 步生成动态验证码

1. 获取 Base32 密钥
   在需要开启 2FA 的平台（如谷歌账号、GitHub 等），开启双因素认证时会提供一串 Base32 格式的密钥（通常以大写字母和数字组成，如JBSWY3DPEHPK3PXP），将其复制备用。
2. 输入密钥并生成
   打开工具网页，在输入框中粘贴获取的 Base32 密钥，点击「生成动态验证码」按钮。
3. 使用验证码完成验证
   页面会实时显示 6 位动态验证码，下方的圆环进度条会以颜色变化（绿色→蓝色→红色）提示剩余时间，红色阶段（最后 5 秒）会闪烁提醒即将过期，及时使用即可。

技术实现：纯前端的 TOTP 计算逻辑

1. TOTP 的核心计算流程

• Base32 密钥解码：平台提供的密钥是 Base32 编码格式，需要先解码为原始字节数组（对应代码中的base32DecODE函数）。
• 时间戳计算：TOTP 以 30 秒为一个时间片，计算当前时间距离「起始时间（1970-01-01）」的时间片数量（counter = 时间戳 / 30）。
• HMAC-SHA1 加密：用解码后的密钥对时间片计数器进行 HMAC-SHA1 加密，得到加密字节数组（hmacSHA1Bytes函数）。
• 动态截断：从加密结果中提取 4 字节有效数据（dynamicTruncation函数），转换为 6 位数字即为最终验证码。

2. 实时倒计时与可视化

• 用Date.now()获取当前时间戳，计算当前时间片内的剩余秒数（30 - (时间戳 % 30)）。
• 通过 SVG 圆环的stroke-dashoffset属性，根据剩余时间动态改变圆环进度（进度 = 已流逝时间 / 30 秒）。
• 用颜色渐变（绿→蓝→红）和闪烁动画（最后 5 秒）增强视觉提示，提升用户体验。

3. 中文乱码修复细节

• 确保 HTML 头部声明meta charset="UTF-8"，统一字符编码。
• 检查并替换所有乱码文本（如标题、按钮文字），确保中文内容以 UTF-8 编码保存。
• 用编辑器将文件转为「UTF-8 无 BOM 编码」，避免不同平台的编码解析差异。

隐私说明：为什么「纯前端」更安全？

• 密钥仅在浏览器内存中临时存储，关闭页面后自动清除，不会写入本地存储（除非用户主动选择）。
• 没有任何 JavaScript 代码会将密钥通过 AJAX、表单提交等方式发送到服务器。
• 开发者可以通过浏览器「检查元素→Network」面板验证：所有操作均无网络请求，彻底做到「密钥不离本地」。

未来扩展：这些功能正在规划中

• 支持二维码扫描（直接解析含密钥的二维码，无需手动输入）。
• 本地存储常用密钥（加密存储在浏览器 localStorage，避免重复输入）。
• 支持 SHA-256 等更多加密算法（部分平台使用非 SHA-1 的 TOTP 标准）。
• 深色模式切换，适配不同使用场景。

结语：安全工具就该「简单且透明」

• 开发这款工具的初衷，是希望提供一个「简单、透明、安全」的 TOTP 解决方案。作为用户，我们不应为了安全牺牲便捷性；作为开发者，我们有责任让技术工具的原理更透明。
• 如果你也需要一款轻量的 TOTP 生成工具，或者想了解更多实现细节，欢迎使用并分享这款纯网页版 TOTP 生成器（代码已开源，可直接保存网页本地使用）。安全上网，从保护好你的每一个验证码开始。

源码下载