# celestial-lottery

**Repository Path**: freespace/celestial-lottery

## Basic Information

- **Project Name**: celestial-lottery
- **Description**: 一个精美的以仙侠为背景的单文件 中二HTML 抽奖系统，专为年会、活动等场景设计。具有华丽的视觉效果、流畅的动画和完整的功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-11-20
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仙界年会·天命抽奖大典

一个精美的以仙侠为背景的单文件 中二HTML 抽奖系统，专为年会、活动等场景设计。具有华丽的视觉效果、流畅的动画和完整的功能。

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)

## ✨ 功能特性

### 🎯 核心功能
- **人员管理**：支持批量导入、查看和删除参与抽奖的人员
- **奖项设置**：灵活配置多个奖项及每个奖项的中奖人数
- **轮盘抽奖**：华丽的轮盘动画，流畅的抽奖体验
- **自动循环**：支持按奖项人数自动循环抽奖
- **防重复中奖**：确保每人只能中奖一次，公平公正
- **中奖记录**：完整记录所有中奖信息，包括姓名、奖项和时间

### 🎨 视觉效果
- **粒子背景**：动态粒子效果，营造神秘氛围
- **轮盘动画**：旋转轮盘配合粒子特效
- **渐变色彩**：金色主题配色，符合"仙界"主题
- **响应式设计**：适配不同屏幕尺寸

### 💾 数据管理
- **本地存储**：使用 localStorage 保存所有数据
- **数据持久化**：刷新页面后数据不丢失
- **一键重置**：支持清空所有数据重新开始

## 📸 功能展示

### 主界面
![主界面](screenshots/main.png)
*华丽的主界面，包含轮盘抽奖区域和控制面板*

### 设置面板 - 人员管理
![人员管理](screenshots/persons.png)
*支持批量导入、查看和删除参与抽奖的人员*

### 设置面板 - 奖项设置
![奖项设置](screenshots/prizes.png)
*灵活配置多个奖项及每个奖项的中奖人数*

### 抽奖过程
![抽奖过程](screenshots/lottery.png)
*轮盘旋转动画，配合粒子特效，营造紧张刺激的氛围*

### 中奖结果/中奖记录
![中奖结果](screenshots/winner.png)
*中奖结果展示，包含爆炸粒子特效*
*完整的中奖记录列表，包含姓名、奖项和时间信息*

> 💡 **提示**：截图位于 `screenshots/` 目录下，您可以将截图放置在该目录并更新文件名。

## 🚀 快速开始

### 使用方法

1. **下载文件**
   ```bash
   git clone https://github.com/yourusername/CelestialLottery.git
   cd CelestialLottery
   ```

2. **打开文件**
   直接用浏览器打开 `index.html` 文件

3. **开始使用**
   - 点击右上角的设置图标
   - 导入参与抽奖的人员
   - 设置奖项和人数
   - 选择奖项并开始抽奖

## 📖 使用指南

### 1. 导入人员

在设置面板的"人员导入"标签页中：
- 每行输入一个人员信息，格式：`姓名 - 部门`（可选）
- 例如：
  ```
  张三 - 技术部
  李四 - 产品部
  王五 - 设计部
  ```
- 点击"导入人员"按钮完成导入

### 2. 设置奖项

在设置面板的"仙缘奖项设置"标签页中：
- 输入奖项名称（如：一等奖、二等奖等）
- 设置该奖项的中奖人数
- 点击"添加奖项"完成设置
- 可以添加多个奖项

### 3. 开始抽奖

1. 在主界面选择要抽取的奖项
2. 点击"启动天命轮盘"按钮，轮盘开始旋转
3. 点击"锁定天命之人"按钮，轮盘开始减速
4. 自动停止并显示中奖结果
5. 如果该奖项还有剩余人数，会自动开始下一轮

### 4. 查看中奖记录

- 中奖名单会实时显示在左侧面板
- 包含中奖者姓名、奖项名称和中奖时间
- 所有记录会自动保存到本地

## 🎮 操作说明

| 操作 | 说明 |
|------|------|
| 点击设置图标 | 打开设置面板 |
| 导入人员 | 批量添加参与抽奖的人员 |
| 添加奖项 | 设置奖项名称和人数 |
| 启动天命轮盘 | 开始抽奖，轮盘开始旋转 |
| 锁定天命之人 | 触发减速，准备停止 |
| 重置轮回 | 清空所有数据，重新开始 |

## 🔧 技术栈

- **HTML5**：页面结构
- **CSS3**：样式和动画效果
- **JavaScript (ES6+)**：核心逻辑
- **Particles.js**：粒子背景效果（CDN）
- **LocalStorage API**：数据持久化

## 📋 浏览器兼容性

- ✅ Chrome (推荐)
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ⚠️ IE 11+ (部分功能可能不支持)

## 🎨 自定义主题

可以通过修改 CSS 变量来自定义主题颜色：

```css
/* 主要颜色 */
--primary-color: #ffd700;  /* 金色 */
--secondary-color: #ff6b00; /* 橙色 */
--bg-color: #0a0e29;       /* 深蓝色背景 */
```

## 📝 注意事项

1. **数据存储**：所有数据存储在浏览器的 localStorage 中，清除浏览器数据会丢失所有记录
2. **人员限制**：每人只能中奖一次，确保公平性
3. **奖项人数**：如果奖项人数超过可用人员数，系统会给出警告
4. **网络要求**：需要网络连接以加载 Particles.js 库（如果 CDN 不可用，粒子效果将不可用）

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

本项目采用 [MIT License](LICENSE) 许可证，您可以自由使用、修改和分发。

## 🙏 致谢

- [Particles.js](https://github.com/VincentGarreau/particles.js) - 粒子效果库

## 📞 联系方式

如有问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件：yjw3160p@163.com
- 微信二维码：

<img src="screenshots/wx.png" alt="微信二维码" width="150" style="display: block; margin: 0 auto;">

---

**祝您抽奖愉快！🎉**