纯前端任务抽签工具生成器——一键生成可本地运行的 HTML 抽签页面，支持自定义任务选项、抽签人管理、滚动动画抽签和 localStorage 历史记录。适用于日常随机决定任务、课堂抽签、家庭活动分配等场景。
任务抽签工具生成器
功能概述
任务抽签工具生成器是一项面向实际任务的技能，主要用于使用此技能，可一键生成一个纯前端 HTML+CSS+JS 抽签工具页面，无需后端，浏览器直接打开即可使用；生成的抽签工具包含以下模块：；
核心要点
- 任务选项模块 ：可新增、删除、编辑抽签任务，默认预设 5 个常见任务；
- 抽签人模块 ：彩色按钮选择执行人，支持增删改名字；
- 抽签动画模块 ：点击抽签后随机滚动定格，带有减速动画效果；
使用与执行
历史记录模块 ：自动记录每次抽签（日期、次数、时。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
结果检查与注意事项
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
任务抽签工具生成器
使用此技能，可一键生成一个纯前端 HTML+CSS+JS 抽签工具页面，无需后端，浏览器直接打开即可使用。
功能概览
生成的抽签工具包含以下模块：
- 任务选项模块：可新增、删除、编辑抽签任务，默认预设 5 个常见任务
- 抽签人模块：彩色按钮选择执行人，支持增删改名字
- 抽签动画模块：点击抽签后随机滚动定格，带有减速动画效果
- 历史记录模块：自动记录每次抽签（日期、次数、时间、抽签人、任务），localStorage 保存
参数说明
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tasks |
string[] | ["写英语作业", "跳绳100个", "阅读20分钟", "做家务", "休息10分钟"] | 抽签任务列表 |
drawers |
object[] | [{name:"小明",color:1},{name:"小红",color:2},{name:"小华",color:3}] | 抽签人列表，color 为 1-6 的颜色编号 |
title |
string | "任务抽签" | 页面标题文字 |
subtitle |
string | "随机决定接下来做什么" | 页面副标题 |
rollingDuration |
number | 1800 | 抽签滚动总时长(ms) |
maxHistory |
number | 100 | 历史记录最大保存条数 |
颜色编号对照
| 编号 | 颜色 | CSS 变量 |
|---|---|---|
| 1 | 柔红 | --color-1 |
| 2 | 柔蓝 | --color-2 |
| 3 | 柔绿 | --color-3 |
| 4 | 柔橙 | --color-4 |
| 5 | 柔紫 | --color-5 |
| 6 | 柔青 | --color-6 |
执行步骤
- 读取用户传入的参数，若未指定则使用默认值
- 基于内置模板生成完整的 HTML 文件
- 将参数注入到 HTML 的 JS 初始化区域（DEFAULT_TASKS、DEFAULT_DRAWERS 等）
- 保存为
任务抽签工具.html到当前工作目录 - 告知用户可直接用浏览器打开运行
文件结构
task-draw-skill/
├── SKILL.md ← 技能元数据与说明（本文件）
└── references/
└── template.html ← 完整 HTML 模板（抽签工具源码）
自定义修改指南
- 改颜色：修改 HTML 中
:root下的--color-1~--color-6CSS 变量 - 改默认任务：修改 JS 中
DEFAULT_TASKS数组 - 改默认抽签人：修改 JS 中
DEFAULT_DRAWERS数组 - 改滚动时长：修改 JS 中
totalDuration常量（默认 1800ms） - 改页面配色：修改
:root下所有 CSS 变量（--bg, --primary 等）
注意事项
- 所有数据保存在 localStorage，键名为
draw_tasks、draw_drawers、draw_history - 页面适配手机端，max-width 520px 居中布局
- 纯前端无后端依赖，直接浏览器打开即可
相关专题
Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章，帮助读者完成上线流程。
2026.10.28
0
16
Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章，帮助读者完成从初始化到日常开发的配置。
2026.10.28
0
15
Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章，帮助读者理解各文件夹的用途与引用方式。
2026.10.28
0
10
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
2026.10.22
0
11
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
2026.10.22
0
10
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
2026.10.22
0
15
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
2026.10.22
0
10
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
2026.10.22
0
25
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
2026.10.22
0
15
热门下载
相关下载
精品课程
共6课时 | 54.7万人学习
共89课时 | 134.1万人学习
共49课时 | 82.6万人学习
