文章目录
前言
今天写了一个很有意思的纯前端小Demo，外表看起来就是一个平平无奇的随机数生成网页 ，任何人打开都能正常输入最小、最大值，点击按钮拿到随机数字。
但是它里面藏了一个秘密彩蛋：输入特定暗号，才会调出隐藏的序列配置后台。
项目全程仅HTML+CSS+原生JS，不需要后端、不需要Node服务，直接丢到Github Pages / Netlify就能在线访问，开箱即用。
⚠️ 温馨提示：本项目仅用于前端学习、趣味娱乐、桌游整活，请勿过度用于正式场景
🎯 项目效果预览
页面主体只有两个输入框、一个生成按钮，界面干净简洁。
- 普通模式 ：最小值填数字、最大值填数字，点击生成，正常返回区间内随机数。
- 隐藏后台解锁方式 ：在最小值输入框，严格区分大小写输入
Intruder，点击【生成随机数】按钮，页面右侧会弹出固定定位的配置面板。 - 配置面板：可以预设第几次生成，固定输出指定数字，自带序列计数器。鼠标离开面板，等待2秒自动隐藏。
在线演示地址：
- Github Pages：https://dxiangwiki.github.io/random-secret-generator/
- Netlify镜像：https://random-secret-generator.netlify.app/
测试小提示：暗号
Intruder首字母大写，区分大小写，如果担心输入错误，可以直接复制这个，拼写错不会触发后台。
✨ 核心设计思路
- 伪装界面：从视觉上看不出任何后门，普通用户使用完全看不出异常。
- 暗号触发机制：复用现有的最小值输入框作为密码入口，不额外增加密码框，隐蔽性很强。
- 固定侧边面板 ：后台面板使用
position:fixed悬浮在页面右侧，不挤压主界面，默认透明隐藏。 - 自动消失逻辑：鼠标移入面板暂停倒计时，鼠标移出2秒后自动隐藏后台。
- 纯静态前端 ：所有计算、序列逻辑全部在浏览器本地JS执行，没有后端，数据只保存在当前页面内存，刷新页面重置所有规则。
💡 技术亮点总结
- 网页彩蛋实现：利用现有输入框作为秘密入口，无额外密码组件，隐蔽性强。
- CSS固定定位悬浮面板，透明过渡动画，不打乱主页面布局。
- 原生JS逻辑，无任何第三方依赖，代码精简。
- 序列计数机制，记录点击次数，匹配预设序列输出指定值。
📌 拓展思考
这种**"表面普通工具，内置隐藏配置后台"**的思路，在前端彩蛋、CTF网页类题目里面很常见。
普通人使用页面看不出异常，只有知道特定触发口令，才能解锁隐藏功能。
仓库地址
https://github.com/dxiangwiki/random-secret-generator