待办事项清单

待办事项清单

项目简介

待办事项清单是一款轻巧易用的纯前端任务管理应用。它把最经典的「列清单、逐项完成」场景搬进浏览器：打开即用，输入一句待办按回车即可入列，勾选标记完成，随时回看当天进度。所有数据保存在浏览器本地，关闭页面也不会丢失。

整个应用由单个 HTML 文件承载，零依赖、零后端，是一个真正开箱即用的效率小工具。

核心功能

• 快速添加：输入框支持回车与按钮两种添加方式，每个事项自动记录创建时间（月/日 时:分）。

• 完成与删除：勾选复选框标记完成，完成事项文字变灰并加删除线；一键删除不再需要的事项。

• 三视图筛选：全部 / 进行中 / 已完成三个筛选标签，每项自带实时计数，方便聚焦「还没做完」的事。

• 今日概况：统计全部事项、已完成数量与完成率，配以渐变进度条，一眼看清当天任务推进情况。

• 本地持久化：所有事项通过 localStorage 保存，刷新页面、关闭浏览器后数据依然保留。

• 响应式布局：窄屏下自动适配，移动端同样顺手。

技术架构

应用采用「交互层 → 状态层 → 持久化层」的简洁三层结构，全部运行在浏览器端，无后端依赖。

• 交互层：添加面板负责捕获输入；事项列表实时渲染每条待办；筛选按钮与统计卡片驱动视图切换与概况展示。

• 状态层：事项以对象数组存储，每个对象包含文本、完成状态与创建时间三个字段；勾选、删除、添加操作直接修改数组后触发统一重绘，保证界面与数据一致。

• 持久化层：通过 localStorage 的 todos 字段读写数据，读取时自动 JSON 解析，写入时自动序列化，天然支持页面刷新后的状态恢复。

核心逻辑说明

数据模型：每条待办是一个 { text, done, time } 对象。text 为事项内容（最多 80 字），done 为布尔完成态，time 为创建时的本地时间字符串。新事项插入数组头部，保证最新任务显示在最上方。

筛选逻辑：维护一个当前筛选状态（all / active / done），渲染时先按状态过滤数组，再遍历生成列表项。筛选标签的计数实时反映各状态数量，随数据变化自动更新。

渲染联动：所有操作——添加、勾选、删除、切换筛选——都收敛到统一的 render() 函数，由数据驱动整页重绘，避免散落的 DOM 操作导致状态不同步。完成率进度条宽度随完成比例动态过渡。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 数据本地化：待办数据只保存在用户浏览器，无隐私上传风险。

• 交互即时：统一重绘模型让添加、完成、筛选的反馈零延迟，操作流畅。

• 代码简洁可扩展：核心逻辑紧凑清晰，易于继续扩展（例如增加优先级、截止日期、拖拽排序等功能）

开发者作品展览馆