# 随机抽人

**Repository Path**: funmudpee/classroom-random-draw

## Basic Information

- **Project Name**: 随机抽人
- **Description**: 随机抽人，用html实现，数据存在localstory中，0依赖
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-12
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, CSS, HTML

## README

# 课堂抽人系统

为了使系统尽可能简单，使用html js css写了这个，班级数据存储在LocalStorage中。

![alt text](./images/image.png)

## 核心功能

### 1. 班级管理

![alt text](./images/image-2.png)

- **设计理念**：通过矩阵式管理（行×列）模拟真实教室布局
- 特色功能：
  - 非覆盖式导入（自动处理重名）
  - 可视化空座位标记（点击切换）

### 2. 随机抽人

![alt text](./images/image-1.png)

- **算法设计**：加权随机算法确保公平性
- 视觉反馈：3D翻转动画 + 颜色高亮

### 3. 数据持久化

- **安全机制**：
  - 自动备份版本控制
  - 数据损坏检测

## 使用指南

### 添加班级

将html文件放到电脑桌面上，用浏览器打开，首先点击添加班级，请认真输入班级的行列。
![alt text](./images/image-3.png)
班级添加成功，结果如下图所示：
![alt text](./images/image-4.png)

### 修改班级

点击对应的位置可以把位置标记为空位置，点击保存修改。

点击修改名称可以修改当前被选中班级的名称。

### 数据导入导出

考虑到应该经可能的减少依赖且不能联网，选择将数据存储到localStorage中。

只要使用相同的浏览器打开相同的html文件，数据是不会丢失的。

但是考虑到数据安全问题还是弄了这个。

点击导出数据，就可以导出json文件，将json文件导入就可以恢复数据。

## 设计

**零依赖架构**：

    - 纯原生JS实现
    - 单文件

## 贡献建议

1. 待开发功能：
   - [ ] 多语言支持
   - [ ] 考勤统计报表
   - [ ] 声音反馈