Skip to content

xiaoxiaoye218/Time-Visualization

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

时间感知应用

这是一个基于HTML/CSS/JavaScript的时间管理工具,它可以帮助你可视化一天中的时间分配,并记录各种活动的持续时间。

主要功能

  1. 24小时进度条可视化:实时展示今天已经过去的时间和剩余时间。
  2. 活动追踪:开始一项活动后,进度条会用相应颜色标记这段时间。
  3. 时间段编辑:可以手动设置特定时间段为某种活动(适用于忘记开始/停止记录的情况)。
  4. 预设活动管理:可以添加、编辑和删除预设活动,每种活动可以设置不同的颜色。
  5. 数据持久化:所有活动和记录会保存在浏览器的本地存储中。
  6. 活动统计:实时统计每种活动累计花费的时间。

使用方法

  1. 直接打开 index.html 文件即可使用。
  2. 界面上方的进度条显示今天24小时的时间分配情况。
  3. 要开始记录一项活动,点击对应的活动按钮。
  4. 要停止当前活动,再次点击同一个活动按钮。
  5. 要切换到另一个活动,直接点击新的活动按钮。
  6. 要添加新的活动类型,在"预设活动"区域输入活动名称和选择颜色,然后点击"添加预设"。
  7. 要编辑某个时间段,在"编辑时间段"区域设置开始时间、结束时间和活动类型,然后点击"应用修改"。
  8. 如果要将某个时间段恢复为默认状态(即没有活动),选择"-- 恢复默认 --"选项。

特性说明

  • 不同颜色的进度条片段代表不同类型的活动。
  • 默认灰色显示的是未记录任何活动的时间。
  • 浅灰色表示今天剩余的时间,深灰色表示已经过去的时间(未记录活动)。
  • 活动按钮上的编辑图标(✏️)可以修改活动的名称和颜色。
  • 活动按钮上的删除图标(❌)可以删除该预设活动。
  • 修改活动的颜色会同时更新所有使用该活动记录的时间段颜色。
  • 活动统计区域显示每种活动今天累计花费的时间。

技术实现

  • 纯前端实现,无需服务器支持。
  • 使用HTML/CSS/JavaScript技术栈。
  • 使用localStorage实现数据持久化。
  • 进度条由1440个小片段组成,对应一天中的每一分钟。

About

简易web端时间可视化工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published