第22课：课程表小程序
进度 0/30
📅
课程表小程序
项目二：你的专属课程管家
📖知识引入
📋需求梳理
按周显示课程：每天几节课、什么科目、什么时间。全班同学都能用——解决真实需求的作品最有价值。
🗓️数据设计
用对象按天分组：{周一:[{时间,科目}], 周二:[...]}。想加「老师」「教室」字段，改一行数据结构就行。
🎨页面设计
顶部周一到周日横滑切换，中间当天课程列表，加课页录入科目和时间——三个页面完成闭环。
⭐进阶玩法
不同科目配不同颜色卡片（语文橙、数学蓝、体育绿）；自动高亮「今天」；再加个作业记事本功能。
🤖AI分工技巧
「根据日期自动高亮今天」的JS逻辑让AI写——日期计算容易出错（跨月、周末），AI处理这类细节最拿手。
💡
课程表=按天分组的列表，先做周一再复制到七天！
🔍课程表页面草图
// 数据设计：按天分组
courses = {
'周一': [
{ time: '8:00', name: '语文' },
{ time: '9:00', name: '数学' }
],
'周二': [ ... ]
}
// AI帮你写：自动高亮今天
const days = ['周日','周一','周二',
'周三','周四','周五','周六']
const today = days[new Date().getDay()]页面设计草图：
┌────────────────┐ │ 一 二 三 四 五 六日│ │ ▼ │ │ 今天：周三 ⭐ │ │ ──────────── │ │ 08:00 语文 📕 │ │ 09:00 数学 ➗ │ │ 10:00 英语 🔤 │ │ 14:00 体育 ⚽ │ │ [＋加课] │ └────────────────┘
颜色小技巧：
语文→橙色 🟠
数学→蓝色 🔵
体育→绿色 🟢
课程卡片五颜六色， 一眼找到下节课！
getDay()返回0-6， 0是周日—— 这个坑让AI提醒你别踩！
🎯小测验
第1题：课程表最合适的数据结构是？
第2题：想给不同科目配不同颜色，应该改？
第3题：自动高亮「今天」的功能，推荐让AI写的原因是？
📝本课知识点
- ✓按周查看课程，全班可用
- ✓数据按星期分组
- ✓顶部切换+列表+加课页
- ✓科目配色+今日高亮
- ✓日期逻辑交给AI
第22课完成！继续探索下一课吧 🚀