网站盲盒HTML源码,点一下就开,马上发现新网点
极简版网站盲盒单页网站,纯前端实现,读取本地 prizes.json 随机抽取网站并跳转。界面简洁清新,开箱动画友好,可自定义添加任意网站链接,适合做导航盲盒、趣味网站推荐。 功能特点 – 极简无冗余代码,无后端依赖,直接部署即用- 读取 JSON 配置文件,无需修改 HTML 即可批量添加网站- 点击按钮随机抽取网站,弹窗提示名称后新标签页打开- 加载状态、防重复点击、延迟开箱动画- 响应式居中布局,风格清爽现代- 完全静态页面,服务器零压力 文件结构 plaintext website-blindbox/├── index.html # 主页面├── prizes.json # 网站列表配置文件└── README.md # 说明文档 部署教程 1. 将 index.html 和 prizes.json 上传到网站目录2. 直接访问 index.html 即可运行3. 支持静态服务器、Nginx、虚拟主机、Vercel、GitHub Pages 等 配置说明(修改网站列表) 编辑 prizes.json ,格式如下: json [ {“name”:”百度”,”url”:”https://www.baidu.com”}, {“name”:”B站”,”url”:”https://www.bilibili.com”}, {“name”:”源码网”,”url”:”https://xxx.com”}] – name :网站名称(弹窗显示)- url :跳转地址直接追加/删减即可,无需修改代码。 页面自定义 修改标题与文案 直接编辑 HTML 内文字: html <h1>🎁 网站盲盒</h1><p>点击按钮,随机探索一个宝藏网站!</p><button id=”openBtn”>开启惊喜</button> 修改颜色 CSS 内可修改: – 背景色: body { background:#f0f2f5; } – 按钮主色: background:#4CAF50; – 卡片圆角、阴影、大小均可直接调整 修改开箱延迟 javascript setTimeout(() => { … }, 800); 单位毫秒,可改成 500、1000 等。 使用方法 1. 打开网页2. 点击「开启惊喜」3. 等待加载动画完成4. 弹窗提示抽中网站,自动新窗口打开5. 点击「再来一个!」继续抽取 注意事项 1. 必须保证 prizes.json 和 index.html 在同一目录2. JSON 格式必须标准,不能有多余逗号,否则无法加载3. 纯前端项目,无数据存储,每次刷新随机池重置4. 支持所有现代浏览器 网站盲盒HTML源码































当前无权限发表评论
登录后评论
还没有人评论,快来抢沙发吧~