年会抽奖系统

项目介绍

此年会抽奖系统是一个基于前端技术的抽奖工具，旨在为企业年会、活动等场合提供便捷的抽奖解决方案。该系统使用HTML、CSS和JavaScript开发，数据存储通过localStorage实现持久化，用户无需后端支持即可使用。适合纯小白使用，无需任何部署打开index.html即可使用。

项目架构

• 前端纯静态实现，无需后端
• 使用技术: HTML + CSS + JavaScript
• 数据存储: localStorage

核心功能

1. 抽奖功能

   • 支持多个奖项（特等奖到阳光普照奖）
   • 可设置每次抽取人数
   • 实现了防重复抽取
   • 使用Fisher-Yates洗牌算法确保随机公平

2. 人员管理

   • 支持增删改查
   • 支持搜索功能
   • 可导入导出名单
   • 可恢复默认名单

3. 中奖记录

   • 自动记录中奖信息
   • 支持导出Excel
   • 可清空记录
   • 显示剩余可抽奖人数

特色功能

• 奖项管理：每个奖项有固定数量限制
• 奖品分配：特等奖和一等奖固定奖品，其他随机
• 动画效果：抽奖时的滚动和闪烁效果
• 响应式设计：支持不同屏幕大小

技术亮点

• 使用加密级随机数保证公平性
• 使用localStorage实现数据持久化
• 采用模块化设计，代码结构清晰
• 界面设计美观，用户体验好

项目优势

• 无需部署服务器，打开即用
• 操作简单直观
• 抽奖公平公正
• 数据不会丢失

使用方法

1. 打开index.html文件，进入年会抽奖系统主界面。

2. 在右上角的人员管理中设置参与者名单。代码中会默认有30个名字，可以在lottery.js中修改。
   
   

3. 奖项和奖品也有默认的内容，可自行修改。
   

4. 选择奖项后，点击“开始抽奖”按钮。
   
   
   抽奖过程中名字和奖品是随机滚动的，截图无法看到效果。

5. 点击停止按钮会停止抽奖，系统会自动记录中奖者信息。
   

6. 点击打印名单可导出中奖记录
   

7. 点击获奖记录可查看每次完整抽奖过程的中奖结果，验证是否为随机抽奖，可以切换奖项或人员视图统计
   
   
   清楚统计按钮可清空测试数据，保证正式使用时数据是干净的。

8. 阳光普照奖比较特殊，奖品有多种，而且每种数量不同，在选中阳光普照奖的时候会先随机抽取某个奖品，然后去随机抽取该奖品个数所对应的人数。

---

关键算法介绍

1. 抽奖功能实现

抽奖功能是年会抽奖系统的核心部分，主要包括以下几个步骤：

• 参与者名单管理：用户可以通过人员管理功能添加、删除或修改参与者名单。所有参与者信息存储在localStorage中，以便在页面刷新后仍然可用。

• 抽奖人数设置：用户可以设置每次抽取的人数，系统会根据当前参与者的数量和设置的抽奖人数进行抽奖。

2. Fisher-Yates洗牌算法

为了确保抽奖的随机性和公平性，系统采用了Fisher-Yates洗牌算法。该算法的基本思想是通过不断交换数组中的元素位置来实现随机排列。具体步骤如下：

1. 初始化数组：将所有参与者的ID或姓名存储在一个数组中。

2. 从后向前遍历数组：从数组的最后一个元素开始，逐步向前遍历到第二个元素。

3. 随机选择交换位置：对于每个元素，随机选择一个在当前元素之前（包括当前元素）的索引，并与当前元素交换位置。

4. 返回结果：遍历完成后，数组中的元素顺序即为随机排列的结果。

示例代码

以下是Fisher-Yates洗牌算法的实现示例：

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        // 生成一个随机索引
        const j = Math.floor(Math.random() * (i + 1));
        // 交换元素
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

3. 防重复抽取

在抽奖过程中，系统会检查已中奖的参与者，确保在同一轮抽奖中不会重复抽取。具体实现如下：

• 记录中奖者：每次抽奖后，将中奖者的ID或姓名存储在一个数组中。

• 过滤参与者：在进行下一轮抽奖前，过滤掉已中奖的参与者，确保每次抽奖的结果都是唯一的。

4. 中奖记录导出

中奖记录会自动保存到localStorage中，并支持导出为Excel文件。使用xlsx库可以方便地将中奖记录转换为Excel格式。