# 5分钟做一个纯前端抽签工具：HTML+CSS+JS 从零到一

> 还在为"今天该做什么"纠结吗？本文带你用纯前端技术制作一个任务抽签工具——无需后端、本地浏览器打开即用，数据 localStorage 自动保存，刷新不丢失。适合日常任务分配、课堂抽签、家庭活动随机安排等场景。

## 最终效果预览

打开浏览器直接运行的抽签工具，包含四大模块：

- 📋 **任务选项**：自定义增删改抽签任务
- 👥 **抽签人**：彩色按钮选定执行人，编辑模式增删改名
- 🎲 **抽签动画**：滚动减速定格，体验感满满
- 📜 **历史记录**：日期|次数|时间|抽签人|任务，最新在前

## 为什么选择纯前端方案？

| 优势 | 说明 |
|------|------|
| **零后端依赖** | 单个 HTML 文件，双击即可运行 |
| **数据本地持久化** | localStorage 存储，刷新不丢数据 |
| **手机友好** | max-width 520px 居中，触屏优化 |
| **即改即用** | 代码有注释和 CSS 变量，改颜色改任务改一行就行 |

## 项目结构

整个工具就是一个 HTML 文件，内嵌 CSS 和 JS：

```
任务抽签工具.html
├── <style>    ← 全部样式（CSS变量 + 动画 + 手机适配）
├── <body>     ← 四个卡片模块
└── <script>   ← 全部逻辑（状态管理 + localStorage + 动画）
```

## 第一步：搭建页面骨架与柔和配色

配色是用户体验的第一印象。我们用 CSS 变量定义一套柔和马卡龙色系：

```css
:root {
  --bg: #f3f0ff;            /* 页面背景渐变起点 */
  --bg-end: #e8f4fd;        /* 页面背景渐变终点 */
  --primary: #7c6cf0;       /* 主色调 */
  --primary-light: #ede9fe; /* 主色调浅色 */
  --color-1: #ff9e9e;       /* 柔红 - 抽签人按钮 */
  --color-2: #9ecaff;       /* 柔蓝 */
  --color-3: #a8e6a3;       /* 柔绿 */
  --color-4: #ffd29e;       /* 柔橙 */
  --color-5: #d6a8ff;       /* 柔紫 */
  --color-6: #9ee0d6;       /* 柔青 */
}
```

**设计要点**：
- 背景使用 `linear-gradient` 双色渐变，避免纯白单调
- 卡片用 `box-shadow` 和 `border-radius: 16px` 打造圆润质感
- 抽签人按钮 6 种颜色循环分配，视觉上不重复且柔和

## 第二步：任务选项模块——增删改一条龙

默认预设 5 个任务，用户可以随时增删改：

```html
<div class="task-list" id="taskList"></div>
<div class="input-row">
  <input type="text" id="newTaskInput" placeholder="输入新任务">
  <button class="btn-mini btn-add" id="addTaskBtn">添加</button>
</div>
```

JS 中用数组存储任务，渲染为可编辑的 input 列表：

```javascript
// 默认任务列表
const DEFAULT_TASKS = ['写英语作业', '跳绳100个', '阅读20分钟', '做家务', '休息10分钟'];
let tasks = Storage.get('draw_tasks', DEFAULT_TASKS);

// 渲染：每个任务一个带编辑和删除的行
function renderTasks() {
  const list = $('taskList');
  list.innerHTML = '';
  tasks.forEach((task, i) => {
    // 创建 task-item div → 拖拽点 + 可编辑 input + 删除按钮
    const input = document.createElement('input');
    input.value = task;
    input.addEventListener('change', () => {
      tasks[i] = input.value.trim();
      Storage.set('draw_tasks', tasks); // 实时保存
    });
    // ... 添加到 DOM
  });
}
```

**关键设计**：每个任务的 input 默认透明边框（不显眼），focus 时才显示紫色边框，视觉上干净又不失可编辑性。

## 第三步：抽签人模块——彩色按钮 + 编辑模式

抽签人用不同底色的按钮呈现，点击选中，选中后按钮上浮 + 紫色描边：

```javascript
const DEFAULT_DRAWERS = [
  { name: '小明', color: 1 },  // 柔红
  { name: '小红', color: 2 },  // 柔蓝
  { name: '小华', color: 3 }   // 柔绿
];

// 颜色编号 → CSS 变量
function drawerColor(n) {
  return `var(--color-${((n - 1) % 6) + 1})`;
}

// 选中状态样式
.drawer-btn.selected {
  outline: 3px solid var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(124,108,240,0.25);
}
```

编辑模式下按钮右上角出现 ✕ 删除叉，双击按钮可改名：

```css
.drawer-btn .del-x { display: none; }
body.edit-mode .drawer-btn .del-x { display: block; }
```

用一个全局 CSS class `edit-mode` 控制编辑状态的显示/隐藏，简洁优雅。

## 第四步：抽签动画——滚动减速定格

这是最有趣的部分。点击抽签后，任务文字快速切换，逐渐减速，最终定格：

```javascript
$('drawBtn').addEventListener('click', () => {
  if (isRolling) return;      // 防止重复点击
  if (selectedDrawerIdx < 0) { // 必须先选抽签人
    $('noDrawerWarn').classList.add('show');
    return;
  }

  isRolling = true;
  let speed = 60;              // 初始切换间隔 60ms
  let elapsed = 0;
  const totalDuration = 1800;  // 总滚动时长 1.8秒

  const roll = setInterval(() => {
    // 随机显示一个任务
    resultText.textContent = tasks[Math.floor(Math.random() * tasks.length)];
    elapsed += speed;

    // 逐渐减速：间隔越来越长
    if (elapsed > totalDuration * 0.5) speed = 110;
    if (elapsed > totalDuration * 0.75) speed = 180;
    if (elapsed > totalDuration * 0.9) speed = 260;

    if (elapsed >= totalDuration) {
      clearInterval(roll);
      // 最终定格：再随机选一个作为结果
      const finalTask = tasks[Math.floor(Math.random() * tasks.length)];
      resultText.textContent = finalTask;
      addHistory(drawers[selectedDrawerIdx], finalTask);
      isRolling = false;
    }
  }, speed);
});
```

**减速策略**：分三段逐步增大切换间隔（60→110→180→260ms），模拟物理减速效果。结果框在滚动时加一个轻微缩放抖动动画：

```css
.result-box.rolling {
  animation: pulse 0.4s ease infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1.00); }
  to   { transform: scale(1.02); }
}
```

## 第五步：历史记录——localStorage 持久化

每次抽签自动记录，格式为 `日期 | 第N次 | 时分秒 | 抽签人 | 任务`：

```javascript
function addHistory(drawer, task) {
  const now = new Date();
  const pad = (n) => String(n).padStart(2, '0');
  const dateStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}`;
  const timeStr = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;

  history.unshift({
    date: dateStr,
    time: timeStr,
    timestamp: now.getTime(),
    drawerName: drawer.name,
    drawerColor: drawer.color,
    task: task
  });
  Storage.set('draw_history', history);
  renderHistory();
}
```

**渲染亮点**：每条记录左侧有圆形序号，抽签人用对应颜色标签展示，新增记录带滑入动画：

```css
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.history-drawer-tag {
  padding: 2px 8px;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}
```

清空按钮带二次确认（`confirm()`），防止误操作。

## localStorage 封装

为了安全地读写 JSON 数据，封装一个简单的 Storage 工具：

```javascript
const Storage = {
  get(key, fallback) {
    try {
      const v = localStorage.getItem(key);
      return v ? JSON.parse(v) : fallback;
    } catch (e) { return fallback; }
  },
  set(key, val) {
    localStorage.setItem(key, JSON.stringify(val));
  }
};
```

三个键名：`draw_tasks`（任务）、`draw_drawers`（抽签人）、`draw_history`（历史）。

## 手机端适配要点

```css
/* 关键适配代码 */
.container { max-width: 520px; margin: 0 auto; }
body { -webkit-tap-highlight-color: transparent; } /* 去掉点击蓝闪 */
.drawer-btn:active { transform: scale(0.94); }     /* 触感反馈 */
.btn-draw:active { transform: scale(0.97); }
input[type="text"] { font-size: 14px; }             /* 输入框字体够大 */
```

## 自定义修改指南

想改什么，改哪里：

| 要改 | 位置 | 示例 |
|------|------|------|
| 颜色 | CSS `:root` 变量 | `--color-1: #ff6b6b;` |
| 默认任务 | JS `DEFAULT_TASKS` | `['读书', '运动']` |
| 默认抽签人 | JS `DEFAULT_DRAWERS` | `[{name:'爸爸', color:1}]` |
| 滚动时长 | JS `totalDuration` | 改为 `2500`（更慢） |
| 页面标题 | HTML `<h1>` | 换成你的标题 |
| 主色调 | CSS `--primary` | `#4a9eff`（蓝色系） |

## 完整源码

完整 HTML 文件可在 [ClawHub 技能包](https://clawhub.ai) 中获取，或直接复制以下代码保存为 `.html` 文件打开即可运行。

## 小结

这个抽签工具从零到一展示了几个实用的前端技巧：

1. **CSS 变量系统**：一套变量搞定全局配色，改一行变一个主题
2. **localStorage 持久化**：无需后端，纯浏览器本地存取
3. **减速动画算法**：分段增大间隔，模拟物理减速
4. **编辑模式切换**：用全局 CSS class 一键切换视图状态
5. **手机端适配**：max-width 居中 + 触感反馈 + 大字体输入

整个项目单文件、零依赖、开箱即用——这就是纯前端的魅力。

---

*本文工具已作为 OpenClaw Skill 发布到 ClawHub，搜索 `task-draw-skill` 即可安装使用，AI 一键生成定制版抽签工具。*


还在为"今天该做什么"纠结吗？本文带你用纯前端技术制作一个任务抽签工具——无需后端、本地浏览器打开即用，数据 localStorage 自动保存，刷新不丢失。适合日常任务分配、课堂抽签、家庭活动随机安排等场景。

# 5分钟做一个纯前端抽签工具：HTML+CSS+JS 从零到一

人工智能

5分钟打造纯前端抽签工具！无需后端，HTML+CSS+JS三件套实现任务随机分配功能。支持自定义任务、彩色抽签人选择、酷炫抽签动画和本地历史记录。采用localStorage存储数据，手机电脑都能用，单文件开箱即运行。适合课堂点名、家务分配等场景，代码注释清晰，轻松修改配色和功能。

代码解释

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

# 5分钟做一个纯前端抽签工具：HTML+CSS+JS 从零到一-腾讯云开发者社区-腾讯云

# 5分钟做一个纯前端抽签工具：HTML+CSS+JS 从零到一

# 5分钟做一个纯前端抽签工具：HTML+CSS+JS 从零到一

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐