网站盲盒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 内文字

修改颜色

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. 支持所有现代浏览器

下载方式：