🎂 班级生日提醒网站

背景 · 这个孩子是谁

安雅 11 岁，5 年级，上海。她是班里的"社交枢纽" —— 认识每个同学，特别注意别人的感受。她发现班里从来没人记得别人生日，一个月大概有 3–4 个同学生日被忽视。这让她很不开心 —— 不是为了某一个人难过，而是整个班级的"温暖感"就这样消失了。

动机 · 那个具体的"卡点"

某个周四，安雅突然意识到"最近有人生日吗？"，问了班长，班长说"不知道，群里没人说"。过了一周，才听说有两个同学生日是在那几天，就没人送祝福。安雅想：是不是可以做一个网页，每次打开就看到这个月谁生日？这样谁都不会被遗忘。 她问了家长，家长说 "可以，HTML/CSS/JS，你能学。"

时间 + 工具

用了什么： 纯 HTML/CSS/JavaScript（无框架）+ GitHub Pages 部署

花了多久： 2 个周末。第 1 个周末做到"能显示这个月生日"，第 2 个周末加入"历史祝福语存档"和美化。

大人帮忙了多少： 爸爸帮她开通了 GitHub 账户，然后全是自己做。她说："我查了 MDN（JavaScript 文档网站），自己搞明白了日期怎么算。"

步骤 · 这个孩子是怎么做的

1. 收集数据： 用问卷调查，把全班 38 个同学的生日收集到一个表格。（有 2 个同学没填，后来补了。）
2. 写 HTML： 做了一个网页框架：顶部是一个"今天"的显示框，下面是一个列表。
3. 写 JavaScript： 最关键的代码：
   • 获取用户的"今天"日期
   • 找出"这个月还有谁要过生日"
   • 如果今天是谁的生日，就用彩带样式突出显示
   • 计算"距离下一个生日还有几天"
4. 加祝福存档： 第 2 个周末，她加了一个功能："历史祝福语"—— 每当班级给某个同学送了祝福，就可以"记录"这句话，下次那个人再过生日就能看到过去的祝福。
5. 美化设计： 加了彩虹背景、不同颜色的蛋糕 emoji、生日那天的闪烁特效。
6. 部署到 GitHub Pages： 爸爸教她怎么用 git 上传，网页就在线了。她把链接发给班长，班长贴在班级群。

核心代码（节选）

// 生日数据（JavaScript 对象）
const birthdays = [
  { name: "小王", month: 3, date: 15 },
  { name: "小李", month: 5, date: 22 },
  { name: "安雅", month: 7, date: 18 },
  // ... 其他 35 个同学
];

// 获取今天的日期
const today = new Date();
const thisMonth = today.getMonth() + 1;
const thisDate = today.getDate();

// 找出这个月的生日
function getBirthdaysThisMonth() {
  return birthdays.filter(b => b.month === thisMonth)
    .sort((a, b) => a.date - b.date);
}

// 检查今天是谁的生日
function getTodaysBirthday() {
  return birthdays.find(b => b.month === thisMonth && b.date === thisDate);
}

// 计算距离下一个生日的天数
function daysUntilBirthday(b) {
  const birthdayThisYear = new Date(today.getFullYear(), b.month - 1, b.date);
  if (birthdayThisYear < today) {
    return Math.ceil((new Date(today.getFullYear() + 1, b.month - 1, b.date) - today) / (1000 * 60 * 60 * 24));
  }
  return Math.ceil((birthdayThisYear - today) / (1000 * 60 * 60 * 24));
}

// 在 HTML 里显示
window.addEventListener('DOMContentLoaded', () => {
  const todayBday = getTodaysBirthday();
  if (todayBday) {
    document.getElementById('today-section').innerHTML =
      `
🎉 今天是 ${todayBday.name} 的生日！记得祝福！
`;
  }

  const thisMonthBdays = getBirthdaysThisMonth();
  const list = document.getElementById('birthday-list');
  thisMonthBdays.forEach(b => {
    const days = daysUntilBirthday(b);
    const li = document.createElement('li');
    li.innerHTML = `${b.month}/${b.date} · ${b.name} · 还有 ${days} 天`;
    list.appendChild(li);
  });
});

样例描述 · 网页实际样子

结果 · 真的发生了什么

• 班长把网站链接贴在班级群后，2 周内 38 个同学都访问过了
• 每个月有 3–5 个生日时，基本全班都会有人在班级群里说祝福
• 有 4 个同学主动找安雅说"我想给网站加一个功能"（但最后没加，就是想法）
• 网站上线后的第一个"有人生日"是 3 天后，小王，全班 22 个人给他祝福（比之前多了 8 倍）
• 到现在已经用了半年多，访问数超过 200 次/月
• 老师也开始看这个网站，有时候会在班级公告里提前两天"提醒大家 XX 同学生日快到了"

这个孩子学到什么

安雅说："原来我们不是'不在乎别人的生日'，而是'真的记不住'。网页就像一个记忆器 —— 只要把信息组织好，整个班级就变成了'懂人情的班级'。"她还加了一句："我也学会了怎么用 JavaScript 处理时间，这个东西比我想的难，但一旦搞懂了，就可以做很多有时间的功能。"

什么没成 · 改了几遍才好

第一版：只是一个静态列表，"今天"和"生日的日期"分不清。她测了一下，发现自己对日期计算的理解有漏洞（同一个生日，"距离还有多少天"不对）。
第二版：加了 JavaScript 来计算日期。但她忘记了"如果生日在去年 12 月，今年 1 月我问'还有多少天'"的情况。改了。
第三版：日期逻辑稳定了，但美化很不够。第二个周末全力美化，加了彩虹、emoji、颜色。
第四版：加了"祝福存档"功能，这是最让她骄傲的。"原来我可以在网页里用 localStorage，把数据保存在用户的浏览器里。"

你也想做？

这个项目用的是中阶版 · 项目 03「做一个真网页」。

替换"班级生日"，可以是：家庭电影夜时间表（妈妈工作表），竞赛签到系统（学校社团），待办清单 app（自己的任务），兴趣小组成员档案 —— 任何"班级或团队有的数据，用网页查比用群里翻旧消息爽得多"的事。

→ 打开项目 03