这是一个基于HTML/CSS/JavaScript的时间管理工具,它可以帮助你可视化一天中的时间分配,并记录各种活动的持续时间。
- 24小时进度条可视化:实时展示今天已经过去的时间和剩余时间。
- 活动追踪:开始一项活动后,进度条会用相应颜色标记这段时间。
- 时间段编辑:可以手动设置特定时间段为某种活动(适用于忘记开始/停止记录的情况)。
- 预设活动管理:可以添加、编辑和删除预设活动,每种活动可以设置不同的颜色。
- 数据持久化:所有活动和记录会保存在浏览器的本地存储中。
- 活动统计:实时统计每种活动累计花费的时间。
- 直接打开
index.html
文件即可使用。 - 界面上方的进度条显示今天24小时的时间分配情况。
- 要开始记录一项活动,点击对应的活动按钮。
- 要停止当前活动,再次点击同一个活动按钮。
- 要切换到另一个活动,直接点击新的活动按钮。
- 要添加新的活动类型,在"预设活动"区域输入活动名称和选择颜色,然后点击"添加预设"。
- 要编辑某个时间段,在"编辑时间段"区域设置开始时间、结束时间和活动类型,然后点击"应用修改"。
- 如果要将某个时间段恢复为默认状态(即没有活动),选择"-- 恢复默认 --"选项。
- 不同颜色的进度条片段代表不同类型的活动。
- 默认灰色显示的是未记录任何活动的时间。
- 浅灰色表示今天剩余的时间,深灰色表示已经过去的时间(未记录活动)。
- 活动按钮上的编辑图标(✏️)可以修改活动的名称和颜色。
- 活动按钮上的删除图标(❌)可以删除该预设活动。
- 修改活动的颜色会同时更新所有使用该活动记录的时间段颜色。
- 活动统计区域显示每种活动今天累计花费的时间。
- 纯前端实现,无需服务器支持。
- 使用HTML/CSS/JavaScript技术栈。
- 使用localStorage实现数据持久化。
- 进度条由1440个小片段组成,对应一天中的每一分钟。