做个周计划看板,看清剩余几天进度
【摘要】 周一雄心壮志,周五发现事没干完却不知时间花哪了。纯前端写了个周计划看板:自动算本周还剩几个工作日、几个休息日,整周进度用百分比条展示,周末/月末节点高亮。技术内核是 Date 算周几 + 剩余天数 + 进度百分比 + 本地存目标。
周一列好计划,过两天一看啥也没动,又不知道时间跑哪了。我想要个看板:打开就告诉我这周还剩几个工作日、几个休息日,整周过去百分之多少了,让我有个数再去排活。纯前端用 Date 算,不依赖任何服务。
一、算今天是一周第几天
JS 里 getDay() 周日返回 0、周六返回 6,先归一化方便算剩余:
function weekInfo() {
const now = new Date();
const dow = (now.getDay() + 6) % 7; // 周一=0 … 周日=6
const remainDays = 6 - dow; // 含今天之后剩几天到周日
const passed = dow + 1; // 已过天数(含今天)
const pct = passed / 7 * 100;
return { dow, remainDays, passed, pct };
}
(getDay()+6)%7 把周一变成 0,符合"周一开始"的习惯。remainDays 是今天到周日还几天,pct 是整周已过百分比,进度条直接吃这个值。
二、工作日 vs 休息日分开算
只看总天数不够,计划只能排工作日,得把周末剔出来:
function workLeft() {
const now = new Date();
let cnt = 0;
for (let i = now.getDay(); i <= 6; i++) {
const d = new Date(now); d.setDate(now.getDate() + (i - now.getDay()));
const w = (d.getDay() + 6) % 7;
if (w < 5) cnt++; // 周一~周五算工作日
}
return cnt;
}
从今天扫到周日,把归一化后 <5(周一到周五)的计入工作日剩余,周末不算。这样"还剩 3 个工作日"比"还剩 5 天"更利于排活——毕竟周末没法开会。
三、进度条 + 目标存本地
把本周目标写一句存 localStorage,看板常驻提醒:
let goal = localStorage.getItem('weekGoal') || '';
goalInput.value = goal;
function saveGoal(v) { localStorage.setItem('weekGoal', v); }
// 进度展示
bar.style.width = weekInfo().pct + '%';
restText.textContent = '剩余 ' + weekInfo().remainDays + ' 天(工作日 ' + workLeft() + ')';
weekGoal 存本周主打目标,刷新还在。进度条宽度绑 pct,剩几天绑 remainDays,一眼看清这周走到哪了。
四、看板能看啥
| 指标 | 作用 |
|---|---|
| 剩余总天数 | 宏观节奏 |
| 剩余工作日 | 实际可排活量 |
| 周进度 % | 时间流逝感 |
小结
周计划看板用 (getDay()+6)%7 把周一归为 0,算出到周日剩余天数和整周已过百分比;再从今天扫到周日,只把周一到周五计入"剩余工作日",排活更准。目标句存 localStorage 常驻提醒,进度条绑百分比、文字绑剩余天数。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)