放假自定义作息总记不住几点该干嘛:写了个作息表

举报
茉莉风铃 发表于 2026/10/08 10:33:00 2026/10/08
【摘要】 纯前端作息时间表,自定义每日各时段安排,到点弹窗/通知提醒,配置存本地。技术内核是时间字符串解析和"当前时间是否落在区间内"的区间判定。

想把放假的一天按"起床、工作、运动、读书、睡觉"切几段,每到一个点提醒自己该切换状态。手机自带的闹钟只能定具体时刻,没法直观看到"现在处于哪一段、下一段几点开始"。于是写了个网页作息表:左边列时间段,右边高亮"当前正在进行的那一段",到点弹提醒。

一、时间字符串怎么解析

用户输入的是 "09:00"、"14:30" 这种字符串。比较大小之前得转成分钟数,最简单:

function toMin(t) {
  const [h, m] = t.split(':').map(Number);
  return h * 60 + m;
}
function nowMin() {
  const d = new Date();
  return d.getHours() * 60 + d.getMinutes();
}

转成"今天第几分钟"之后,所有比较都变成纯数字,不用处理时分进位那套。

二、判断"现在在哪一段"

作息是若干不重叠区间 [start, end)。当前分钟落在哪个区间,哪段就是"进行中"。

let schedule = [
  { name: '工作', start: '09:00', end: '12:00' },
  { name: '午休', start: '12:00', end: '13:30' },
  { name: '运动', start: '18:30', end: '19:30' },
];

function currentBlock() {
  const n = nowMin();
  return schedule.find(b => n >= toMin(b.start) && n < toMin(b.end));
}

注意用的是 n < toMin(b.end),左闭右开。这样 12:00 恰好从"工作"切到"午休",不会同时命中两段。跨午夜的(比如 23:00–01:00)要单独加一天判断,本工具只管白天作息,没那个麻烦。

三、到点提醒

每分钟扫一次,发现进入了"下一段"就提醒。用 Notification 比弹窗体面:

function check() {
  const block = currentBlock();
  if (block && block.name !== lastBlock) {
    if (Notification.permission === 'granted') {
      new Notification('作息提醒', { body: '现在该:' + block.name });
    }
    lastBlock = block.name;
    highlight(block);
  }
}
setInterval(check, 60 * 1000);

lastBlock 记录上一段名字,只有"切换"时才提醒,避免每分钟弹一次。Notification 首次要用户授权,记得在按钮里调 Notification.requestPermission()。

四、配置存本地

字段 存什么 读时还原
schedule 整个数组 JSON JSON.parse 回来
授权状态 浏览器管,不需存 调接口查
localStorage.setItem('schedule', JSON.stringify(schedule));
schedule = JSON.parse(localStorage.getItem('schedule') || '[]');

小结

作息表的核心是"区间判定":把所有时间段转成"当天第几分钟"的数字,当前分钟落在哪个 [start, end) 区间就高亮哪段,用左闭右开避免边界重叠。提醒靠每分钟比对"上一段名字"是否变化,变了才弹,跨午夜的时段要单独处理。配置整个数组 JSON 化存 localStorage,刷新不丢。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0)

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

全部回复

上滑加载中

设置昵称

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

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

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