课表是怎么做的

455 字
2 分钟
课表是怎么做的
课表是怎么做的

起因#

这学期课表比较复杂,周一到周五每天十几节课,还有晚自习,周五下午单双周还轮着上不同科目。手动记容易出错,于是想着能不能把这个课表挂到博客上,随时随地就能查。

数据结构#

课表的核心是 src/data/timetable.ts,两个数组:

  • periods:作息时间,定义每一大节的起止时间和标签
  • courses:课程列表,每条记录包含课程名、星期几、第几大节、上课周次规则、地点、教师

周次规则通过 weeks 字段控制,支持三种模式:

  • { start: 1, end: 21 } — 全部周次
  • { start: 1, end: 21, parity: "odd" } — 单周
  • { start: 1, end: 21, parity: "even" } — 双周

这周五下午就是靠 parity 实现的:单周第一节化学,双周第一节体育,其余课程不变。

排课过程#

按时间表逐天录入,day: 1-5 对应周一到周五,slot 对应 periods 的下标。13 个时段分别是:

早读1早读2上午1-4中午1-2下午1-4晚自习
07:00-07<25>07:25-07<50>08:00-11<41>12:00-13<30>13:40-17<20>17:45-20<30>

周二到周五的课程顺序和周一不同,逐一核对后填入对应 slot。地点和教师目前留空,后续补上。

学期信息#

semester 配置了学期的基本信息,startDate 设成 2026-09-01,totalWeeks 设为 21 周。组件会根据当前日期和开学第一天自动计算现在是第几周,高亮当前周的课程。

效果预览#

课表页面在 /timetable 路由下,桌面端是表格形式展示,手机端切换为按天列表。课程卡片会自动分配颜色,不同科目不同颜色,一眼就能分辨。

后续#

  • 补上教室和教师信息
  • 如果以后有科目调整,直接改 timetable.ts 即可,不需要动代码

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

课表是怎么做的
https://blog.amamo.top/posts/课表是怎么做的/
作者
Admin
发布于
2026-09-19
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
年华
Hello, 欢迎来到我的小破站。
统计
公告
欢迎来到我的博客。我会用AI对博文进入修改和润色。
分类
标签
最新动态
站点统计
文章
33
分类
22
标签
63
总字数
26,612
运行时长
0 天
最后活动
0 天前
天气预报
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.3
文章许可
CC BY-NC-SA 4.0
文章目录