Web前端技术实验

实验14　循环生成年份和月份选项

课程代码 ZY070018｜适用：2024级、2025级｜第14次
2026—2027学年第一学期

字段	内容	字段	内容
大纲锚点	实验项目十二：通过循环语句输出年份和月份	学时拆分	第1次（4学时项目的前2学时）
项目属性	综合设计型 / 必做 / 1人一组	课程目标	LO1、LO2、LO3

本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

掌握for循环、数组和option元素创建。
能根据当前年份生成有限、可解释的年份范围。
理解表单控件值、显示文字和默认选择。

二、核心任务

制作年、月选择器，年份范围为当前年前后各5年，月份为1-12。
用循环和DocumentFragment生成option，禁止手写全部月份选项。
默认选择当前年和当前月，改变选择时在摘要区显示结果。
为选择器设置label并检查键盘操作、焦点和空值处理。

三、验收标准

序号	可观察条件	记录
1	年份范围随系统年份变化，不硬编码某一固定年度。	□通过　□需修改
2	12个月份由循环生成，默认值正确。	□通过　□需修改
3	选择变化后摘要即时、准确更新。	□通过　□需修改

四、提交物

日期选择器阶段项目
循环逻辑说明
边界年份截图
实验报告阶段记录

统一命名：学号_姓名_实验14

五、90分钟流程

时间	活动
0—10	说明与安全检查
10—25	预测、演示、最小验证
25—65	独立完成核心任务
65—80	测试与同伴复核
80—90	抽查与退出记录

六、评分量规（100分）

维度	分值	判定要点
功能与任务完成	45	必做功能可运行，数据和交互正确
测试与问题修复	20	有边界或错误测试，并保留复测记录
代码与页面质量	15	结构、命名规范，控制台无未解释错误
报告与证据	15	报告、截图与源码相互对应
现场解释	5	能解释关键实现和至少一项修改

七、拓展与思考

选做：提供“回到本月”按钮。

思考：为什么生成大量DOM节点时可考虑DocumentFragment？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。