做个周计划看板,看清剩余几天进度

举报
柠檬-夏日清爽 发表于 2026/09/20 15:29:32 2026/09/20
【摘要】 周一雄心壮志,周五发现事没干完却不知时间花哪了。纯前端写了个周计划看板:自动算本周还剩几个工作日、几个休息日,整周进度用百分比条展示,周末/月末节点高亮。技术内核是 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)

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。