单机HTML教学进度记录工具

作者:苹果
发布于:2026/8/31
0

用户输入

我要做一个单机html的网站,用来记录教师上课进度的,没上过的显示课程名称,上过的可以通过点击变成灰色,内容分别是岭南版新教材《艺术美术》二年级上册、七年级上册,课程内容分别是, 二年级:"第1课 中国共产党的诞生", "第2课 好朋友们在一起", "第3课 相亲相爱一家人", "第4课 我要说声“谢谢您”", "第5课 小小礼物传心意", "第6课 记下动人的故事", "第7课 爱心行动我争先", "第8课 今天我值日", "第9课 小小导览员", "第10课 小小志愿者" "第11课 大千世界的人们", "第12课 插图天地", "第13课 动画世界", "第14课 水是生命之源", "第15课 小水滴的力量", "第16课 同饮一江之水", "第17课 守护蓝色家园", "第18课 玩转点点王国", "第19课 嬉戏点点世界", "第20课 调皮点点变幻"。 七年级: "第1课 最可爱的人", "第2课 制茶具明茶礼", "第3课 赏服饰知礼仪", "第4课 品美食守礼节", "第5课 老字号伴手礼", "第6课 都市公共建筑", "第7课 创想候车亭", "第8课 日新月异通四方", "第9课 一桥飞架连天堑", "第10课 天人合一古园林" "第11课 生态和谐新景观", "第12课 鱼纹话吉祥", "第13课 鱼意融生活", "第14课 鱼形启巧思", "第15课 白描人物摹神韵", "第16课 白描花卉妙笔生", "第17课 松鹤延年笔随心"。班级分别呈现二年级(1)班、二年级(2)班、二年级(3)班、七年级(5)班、七年级(6)班、七年级(7)班、七年级(8)班、七年级(9)班、七年级(10)班、七年级(11)班、七年级(12)班。可以做成表格形式,给出提示词

提示词

### 🎯 单机HTML教学进度记录工具

你是一个前端开发专家,擅长使用原生HTML、CSS和JavaScript开发单机交互工具。

你的任务是制作一个用于记录教师上课进度的单机HTML网页,以表格形式展示课程与班级的对应关系,并允许教师通过点击课程单元格标记为“已上”(变灰色)。页面需完全离线可用,所有代码放在一个HTML文件中。

## 内容数据

**年级与课程列表**(岭南版新教材《艺术美术》):

二年级课程:
第1课 中国共产党的诞生  
第2课 好朋友们在一起  
第3课 相亲相爱一家人  
第4课 我要说声“谢谢您”  
第5课 小小礼物传心意  
第6课 记下动人的故事  
第7课 爱心行动我争先  
第8课 今天我值日  
第9课 小小导览员  
第10课 小小志愿者  
第11课 大千世界的人们  
第12课 插图天地  
第13课 动画世界  
第14课 水是生命之源  
第15课 小水滴的力量  
第16课 同饮一江之水  
第17课 守护蓝色家园  
第18课 玩转点点王国  
第19课 嬉戏点点世界  
第20课 调皮点点变幻

七年级课程:
第1课 最可爱的人  
第2课 制茶具明茶礼  
第3课 赏服饰知礼仪  
第4课 品美食守礼节  
第5课 老字号伴手礼  
第6课 都市公共建筑  
第7课 创想候车亭  
第8课 日新月异通四方  
第9课 一桥飞架连天堑  
第10课 天人合一古园林  
第11课 生态和谐新景观  
第12课 鱼纹话吉祥  
第13课 鱼意融生活  
第14课 鱼形启巧思  
第15课 白描人物摹神韵  
第16课 白描花卉妙笔生  
第17课 松鹤延年笔随心

**班级列表**:
二年级(1)班、二年级(2)班、二年级(3)班、七年级(5)班、七年级(6)班、七年级(7)班、七年级(8)班、七年级(9)班、七年级(10)班、七年级(11)班、七年级(12)班

## 功能要求

1. 页面顶部显示标题:教师上课进度记录表。
2. 使用表格展示,行对应课程,列对应班级。
3. 未上过的单元格默认白底黑字,显示完整课程名称;已上过的单元格点击后变为灰色背景,并带有删除线或明显灰暗效果。
4. 再次点击已上过的单元格可取消标记,恢复原样。
5. 每个单元格点击后仅改变自身状态,不影响其他单元格。
6. 表格需有固定表头,方便滚动查看。
7. 页面样式美观,适合课堂展示使用。
8. 将所有课程数据、班级数据完整写入HTML中,不得省略课程内容。

## 输出要求

- 输出一个完整的、可直接保存为`.html`文件并双击运行的单HTML文档。
- 包含必要的HTML结构、CSS样式和JavaScript脚本。
- 代码中注释清晰,便于后期维护。
- 不依赖任何外部库或网络资源。

## 质量标准

- 页面能正确渲染所有课程与班级的交叉表格。
- 点击逻辑正确,状态切换流畅。
- 课程名称完整显示,不溢出单元格。
- 表格支持横向纵向滚动。
- 代码兼容主流浏览器(Chrome、Edge、Firefox)。