# lottery

**Repository Path**: YXKN/lottery

## Basic Information

- **Project Name**: lottery
- **Description**: 年会抽取幸运观众程序
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-03
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎉 抽奖系统使用说明

一个简单易用的网页抽奖系统，支持多奖项配置、实时抽奖动画、结果展示和奖状生成功能。借助Qoder生成。

## ✨ 功能特点

- 🎯 **多奖项配置**：支持配置多个奖项，自由设置奖项名称和中奖人数
- 🎨 **实时动画**：流畅的抽奖动画效果，支持视频播放
- 📊 **结果展示**：清晰展示所有中奖结果，支持查看历史记录
- 🏆 **奖状生成**：为每个奖项生成精美奖状，支持下载为图片
- 💾 **数据持久化**：使用浏览器本地存储，刷新不丢失
- 📱 **响应式设计**：支持不同屏幕尺寸的设备

## 📋 系统要求

### 必需环境
- **Python 3.x** 用于启动HTTP服务器（若不需要奖状的截图保存功能，可不依赖python3环境。）
- **现代浏览器**（Chrome、Firefox、Safari、Edge、奇安信、360等）

### 开发环境
- 任意，VS Code等

## 🚀 快速开始

### 0. 直接打开（与步骤1选择使用）

**⚠️ 如果不需要自带的截图保存功能，则可直接打开html文件进行使用。**

使用浏览器打开config.html使用


### 1. 使用HTTP服务器（与步骤0选择使用）

#### 1.1 启动本地http服务
**⚠️ 重要：由于奖状图片保存功能需要，必须通过HTTP服务器访问，不能直接双击打开HTML文件。**


在项目目录下打开终端，运行以下命令：

```bash
# 使用Python 3（推荐）
python3 -m http.server 8000

# 或使用Python 2
python -m SimpleHTTPServer 8000
```

#### 1.2 访问系统

在浏览器中打开：
```
http://localhost:8000/config.html
```

### 2. 开始使用

1. **配置奖项**：首次打开会自动跳转到配置页面
2. **设置参数**：输入参与人员号码范围和各奖项信息
3. **开始抽取**：点击"开始抽取"按钮
4. **查看结果**：抽奖完成后自动跳转到结果页面
5. **生成奖状**：在结果页点击"查看结果"按钮，可查看幸运号码
6. **奖状下载**：在查看结果页可以截图下载。由于浏览器跨域限制，此功能需要启动http服务

## 📁 项目结构

```
lottery/
├── lottery.html          # 抽奖主页面
├── config.html           # 奖项配置页面
├── result.html           # 结果展示页面
├── certificate.html      # 奖状展示页面
├── css/
│   └── style.css        # 全局样式文件
├── js/
│   ├── config.js        # 配置页面逻辑
│   ├── lottery.js       # 抽奖主逻辑
│   ├── render.js        # 抽奖渲染和算法
│   ├── result.js        # 结果页面逻辑
│   ├── certificate.js   # 奖状页面逻辑
│   └── html2canvas.min.js  # 截图库
├── img/
│   └── board-1.jpg      # 奖状背景图
├── video/               # 抽奖动画视频（可选）
└── README.md            # 本文件
```

## 📖 使用指南

### 配置奖项

1. 打开配置页面（首次使用或点击"重新配置"）
2. 设置参与人员号码范围（例如：1-100）
3. 配置奖项：
   - 奖项名称（如：一等奖、二等奖）
   - 中奖人数（如：3人）
4. 可添加或删除奖项
5. 点击"保存配置并开始抽取"

### 执行抽奖

1. 系统按照从低到高的顺序抽取奖项
2. 点击"开始抽取"按钮开始当前轮次的抽奖
3. 等待动画播放完成
4. 查看幸运号码
5. 继续抽取下一个奖项

### 查看结果

1. 所有奖项抽完后自动跳转到结果页面
2. 结果页面显示所有中奖信息
3. 可以点击"查看结果"为每个奖项生成奖状
4. 可以点击"返回"查看抽奖进度或继续抽奖

### 生成奖状

1. 在结果页面点击对应奖项的"查看结果"按钮
2. 系统会在新标签页打开奖状页面
3. 奖状显示：
   - 奖项名称
   - 所有幸运号码
   - 日期
4. 点击"保存图片"下载为PNG格式

## 🔧 高级配置

### 备选号码功能

如果某个号码缺席，可以使用备选号码功能：

1. 在抽奖页面，抽取某个奖项后
2. 如果有号码缺席，输入缺席的号码
3. 点击"增补备选号码"
4. 系统会从剩余号码中随机抽取替补

### 修改奖状背景图

替换 `img/board-1.jpg` 文件即可更换奖状背景图。

### 自定义样式

修改 `css/style.css` 可以调整界面样式，主要变量：
- `--red-primary`: 主色调（红色）
- `--yellow-primary`: 辅助色（黄色）

## ⚠️ 常见问题

### Q: 为什么不能直接双击HTML文件打开？

**A:** 奖状图片保存功能需要通过HTTP协议访问，file:// 协议会被浏览器的安全策略阻止。必须使用HTTP服务器访问。

### Q: 启动服务器后无法访问？

**A:** 
1. 检查端口8000是否被占用，可以换其他端口：`python3 -m http.server 8080`
2. 确认防火墙没有阻止
3. 尝试使用 `127.0.0.1:8000` 替代 `localhost:8000`

### Q: 奖状图片保存失败？

**A:** 确保：
1. 正在使用HTTP服务器访问（地址栏显示 http://localhost）
2. 背景图片 `img/board-1.jpg` 存在
3. 浏览器允许下载文件

### Q: 抽奖数据丢失？

**A:** 
1. 数据保存在浏览器LocalStorage中
2. 清除浏览器缓存会导致数据丢失
3. 不同浏览器的数据不共享
4. 隐私模式/无痕模式下数据不会保存

### Q: 如何重置所有数据？

**A:** 
1. 在配置页面点击"重置所有数据"
2. 或在浏览器控制台执行：`localStorage.clear()`

### Q: 号码范围可以不连续吗？

**A:** 目前只支持连续号码范围（如1-100），如需指定具体号码列表，需要修改代码。

## 🎨 自定义开发

### 抽奖算法

系统使用 **Fisher-Yates洗牌算法** 确保完全公平的随机抽取，代码位于 `js/render.js`。

### 添加新功能

主要文件说明：
- `js/config.js` - 修改配置逻辑
- `js/lottery.js` - 修改抽奖流程
- `js/render.js` - 修改抽奖算法和动画
- `js/result.js` - 修改结果展示
- `js/certificate.js` - 修改奖状生成

## 📝 部署说明

### 部署到新机器

1. 复制整个 `lottery` 文件夹到新机器
2. 确保Python已安装（大多数Linux已预装）
3. 进入项目目录
4. 运行 `python3 -m http.server 8000`
5. 访问 `http://localhost:8000/lottery.html`

### 部署到服务器

将项目文件夹上传到Web服务器（Apache、Nginx等），直接访问 `lottery.html` 即可。

## 📜 技术栈

- **前端框架**：原生HTML/CSS/JavaScript
- **样式**：CSS3动画、Flexbox、Grid布局
- **存储**：LocalStorage API
- **截图**：html2canvas库
- **随机算法**：Fisher-Yates洗牌算法

## 🤝 贡献

欢迎提交问题和改进建议！

## 📄 许可证

本项目仅供学习和内部使用。

---

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