网站盲盒HTML源码,点一下就开,马上发现新网点 – 优选小屋
发帖

网站盲盒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源码

下一篇 带后台+前端 轻科技玻璃拟态个人主页系统源码
评论区

当前无权限发表评论

还没有人评论,快来抢沙发吧~

在线客服
工作日在线,欢迎咨询购买、授权、部署与售后问题。
在线时间周一至周五 10:00 - 18:00
QQ2952194682
如遇支付、授权、安装、定制等问题,可优先联系在线客服,我们会尽快协助处理。