334 lines
15 KiB
Markdown
334 lines
15 KiB
Markdown
# Web 前端微项目
|
||
|
||
## 项目总览
|
||
|
||
|#|项目名称|核心知识域|难度|平台支持|
|
||
|---|---|---|---|---|
|
||
|1|🌦️ 天气卡片|CSS 布局与样式|⭐⭐|✅ 完全支持|
|
||
|2|🍕 点餐菜单|DOM 交互与数据渲染|⭐⭐⭐|✅ 完全支持|
|
||
|3|🎵 音乐播放器|CSS 动画与状态管理|⭐⭐⭐|✅ 完全支持|
|
||
|4|🎨 渐变配色生成器|CSS 实时交互|⭐⭐|✅ 完全支持|
|
||
|5|🃏 个人作品集名片|响应式与高级动效|⭐⭐⭐|✅ 完全支持|
|
||
|6|🛒 商品详情页|组件交互与动画|⭐⭐⭐⭐|✅ 完全支持|
|
||
|7|🎰 抽奖转盘|Canvas 绘图与动画|⭐⭐⭐⭐|✅ 完全支持|
|
||
|8|🗓️ 倒计时活动页|定时器与 CSS 动画|⭐⭐⭐|✅ 完全支持|
|
||
|9|⌨️ 打字速度测试|字符逻辑与计时|⭐⭐⭐|✅ 完全支持|
|
||
|10|🎮 贪吃蛇|Canvas 与游戏逻辑|⭐⭐⭐⭐⭐|✅ 完全支持|
|
||
|
||
---
|
||
|
||
## Prompt Chain 三阶进化说明
|
||
|
||
|阶段|特征|学生认知状态|
|
||
|---|---|---|
|
||
|🟡 初级|描述结果，无细节|只知道想要什么，不知道怎么描述。生成结果往往布局混乱、样式单一。|
|
||
|🔵 中级|描述视觉元素与结构|能列出页面的主要模块，开始关注布局和配色，但缺乏交互细节。|
|
||
|🟢 高级|描述实现细节与联动逻辑|能精确描述动画参数、交互行为、数据联动和边界情况，生成结果接近生产级页面。|
|
||
|
||
---
|
||
|
||
## 项目 01 · 🌦️ 天气卡片
|
||
|
||
**难度：** ⭐⭐ 入门级
|
||
|
||
**📌 教学重点：** 纯 CSS 样式驱动，零 JS 逻辑压力，适合作为第一个项目。学生在配色、布局、图标引入上快速获得成就感。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述结果，无细节|帮我生成一个天气页面|
|
||
|🔵 中级|描述视觉元素|帮我生成一个天气卡片，显示温度、湿度和天气图标，用渐变蓝色背景|
|
||
|🟢 高级|描述具体实现细节|在上一版基础上，把温度字体改大到72px，加一个5天预报横向滚动条，夜间模式切换按钮放右上角，动画用 fade-in 0.3s|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|CSS 渐变|`linear-gradient`、`radial-gradient` 背景设置|
|
||
|Flexbox 布局|居中对齐、横纵排列、间距控制|
|
||
|CSS 变量|`--color-primary` 等统一管理配色方案|
|
||
|过渡动画|`transition` 实现 fade-in、hover 效果|
|
||
|图标引入|Font Awesome 等图标字体的 CDN 引入与使用|
|
||
|滚动容器|`overflow-x: scroll` 实现横向滚动预报栏|
|
||
|
||
---
|
||
|
||
## 项目 02 · 🍕 点餐菜单
|
||
|
||
**难度：** ⭐⭐⭐ 初中级
|
||
|
||
**📌 教学重点：** 数据驱动视图的基础思维训练。学生需要将菜品数据数组渲染为列表，并处理购物车的实时计算逻辑。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述结果，无细节|做一个餐厅点餐页面|
|
||
|🔵 中级|描述视觉与结构|做一个中餐外卖菜单页面，有图片、菜名、价格，底部有购物车栏|
|
||
|🟢 高级|描述交互逻辑细节|在菜品卡片上加+/-数量按钮，购物车栏实时显示总价，点击结算弹出确认弹窗，菜品按热菜/凉菜/主食分类 Tab 切换|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|DOM 动态渲染|数组数据 → `innerHTML` / `createElement` 动态生成列表|
|
||
|事件委托|父元素统一监听子元素点击，提升性能|
|
||
|classList 操作|Tab 切换时添加/移除 active 类名|
|
||
|数量逻辑|变量计算与 DOM 更新联动（加减按钮）|
|
||
|实时计算|购物车总价的动态汇总与显示|
|
||
|弹窗交互|结算确认弹窗的显示与隐藏控制|
|
||
|
||
---
|
||
|
||
## 项目 03 · 🎵 音乐播放器
|
||
|
||
**难度：** ⭐⭐⭐ 初中级
|
||
|
||
**📌 教学重点：** 状态变化驱动多处 UI 同步更新。一个播放状态变量需要同步影响按钮图标、封面旋转、进度条等多个元素。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述功能结果|帮我做一个音乐播放器界面|
|
||
|🔵 中级|描述视觉组件|做一个音乐播放器，有专辑封面、歌名、进度条、上一首/播放/下一首按钮，深色背景|
|
||
|🟢 高级|描述动态联动细节|专辑封面旋转动画在播放时启动，进度条可拖拽，背景颜色根据专辑封面主色调自动变化，歌词区域逐行高亮滚动|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|@keyframes 动画|封面旋转、淡入等关键帧动画定义|
|
||
|animation-play-state|通过 JS 控制动画暂停与继续|
|
||
|状态管理|JS 维护播放状态变量，驱动多个 UI 元素联动|
|
||
|input[type=range]|自定义进度条样式与拖拽交互|
|
||
|Audio API|`HTMLAudioElement` 的播放、暂停、进度控制|
|
||
|歌词滚动|定时器驱动歌词数组逐行高亮与滚动定位|
|
||
|
||
---
|
||
|
||
## 项目 04 · 🎨 渐变配色生成器
|
||
|
||
**难度：** ⭐⭐ 入门级
|
||
|
||
**📌 教学重点：** CSS 属性与 JS 实时联动的直观训练。用户操作 → JS 读取值 → 更新 CSS 属性，反馈即时，学生成就感强。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述功能结果|做一个渐变色背景的页面|
|
||
|🔵 中级|描述核心交互|做一个渐变配色生成器，有两个颜色选择器，实时预览渐变效果，可以切换线性/径向渐变|
|
||
|🟢 高级|描述功能细节|加角度滑块控制渐变方向，支持添加多个颜色节点，一键复制CSS代码，随机生成按钮带过渡动画|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|input[type=color]|颜色选择器的值读取与实时监听|
|
||
|CSS 渐变动态生成|用 JS 拼接 `linear-gradient` / `radial-gradient` 字符串|
|
||
|DOM 实时更新|`input` 事件监听 → 实时修改元素 `style` 属性|
|
||
|input[type=range]|角度滑块控制渐变方向参数|
|
||
|剪贴板 API|`navigator.clipboard.writeText()` 复制 CSS 代码|
|
||
|Math.random()|随机生成颜色值的算法实现|
|
||
|
||
---
|
||
|
||
## 项目 05 · 🃏 个人作品集名片
|
||
|
||
**难度：** ⭐⭐⭐ 初中级
|
||
|
||
**📌 教学重点：** 现代 CSS 高级特性综合运用。最贴近真实需求，学生可以直接做出自己的作品集页面，实用价值高。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述页面类型|帮我做一个个人介绍页面|
|
||
|🔵 中级|描述布局与风格|做一个程序员作品集主页，有头像、姓名、技能标签、项目卡片三列布局，整体科技感配色|
|
||
|🟢 高级|描述交互与动效细节|鼠标悬停项目卡片时有3D翻转效果，技能标签用动态进度条，页面滚动时导航栏背景从透明变毛玻璃，加打字机动画显示职位|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|CSS Grid 响应式|`auto-fill` + `minmax` 实现自适应多列布局|
|
||
|媒体查询|`@media` 断点适配移动端|
|
||
|CSS 3D 变换|`perspective` + `rotateY` 实现卡片翻转效果|
|
||
|position: sticky|导航栏吸顶效果实现|
|
||
|backdrop-filter|`blur()` 实现毛玻璃背景效果|
|
||
|打字机动画|JS 逐字输出职位文字的定时器实现|
|
||
|
||
---
|
||
|
||
## 项目 06 · 🛒 商品详情页
|
||
|
||
**难度：** ⭐⭐⭐⭐ 中高级
|
||
|
||
**📌 教学重点：** 复杂交互状态的拆解与管理。涉及多个组件之间的状态联动，是电商类业务最典型的前端场景。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述页面类型|做一个商品页面|
|
||
|🔵 中级|描述主要模块|做一个运动鞋商品详情页，有图片轮播、价格、颜色选择、尺码选择、加购按钮|
|
||
|🟢 高级|描述联动与动效|颜色选中后主图自动切换对应配色，尺码缺货时显示为灰色不可点击，加购按钮点击有抛物线飞入购物车动画，右侧价格区域吸顶|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|图片轮播|索引变量控制当前图片，缩略图点击联动主图|
|
||
|规格选择状态|选中态、禁用态的 CSS 类名切换管理|
|
||
|SKU 数据结构|颜色/尺码组合对应不同库存的对象设计|
|
||
|动画轨迹计算|JS 计算抛物线路径实现飞入购物车动画|
|
||
|position: sticky|右侧价格区域在滚动时保持可见|
|
||
|DOM 禁用控制|`disabled` 属性与对应样式的联动|
|
||
|
||
---
|
||
|
||
## 项目 07 · 🎰 抽奖转盘
|
||
|
||
**难度：** ⭐⭐⭐⭐ 中高级
|
||
|
||
**📌 教学重点：** Canvas 原生绘图与动画。与贪吃蛇形成差异，重点考察弧度数学计算和 `requestAnimationFrame` 缓动控制。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述功能结果|做一个抽奖转盘页面|
|
||
|🔵 中级|描述视觉与交互|做一个可以自定义选项的抽奖转盘，点击按钮旋转，转完后弹出中奖结果，6个扇形用不同颜色|
|
||
|🟢 高级|描述动效与交互细节|转盘旋转用缓动函数（先快后慢），中奖扇形高亮放大，支持编辑奖项名称，加音效反馈，转动过程中禁止重复点击|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|Canvas 弧度绘图|`arc()`、`fillStyle`、`strokeStyle` 绘制扇形|
|
||
|数学计算|`Math.PI` 弧度换算，扇形角度均分计算|
|
||
|requestAnimationFrame|逐帧旋转动画的主循环实现|
|
||
|缓动函数|Ease-out 效果（先快后慢）的数学实现|
|
||
|数据驱动绘图|奖项数组 → Canvas 动态重绘转盘|
|
||
|交互状态锁|转动期间禁止重复点击的 `isSpinning` 标志位|
|
||
|
||
---
|
||
|
||
## 项目 08 · 🗓️ 倒计时活动页
|
||
|
||
**难度：** ⭐⭐⭐ 初中级
|
||
|
||
**📌 教学重点：** 定时器控制与时间计算逻辑。翻牌动画是 CSS 3D 变换的经典应用场景，粒子效果训练学生对数组的操作能力。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述功能结果|做一个倒计时页面|
|
||
|🔵 中级|描述场景与视觉|做一个高考倒计时页面，显示距离高考还有多少天时分秒，蓝色激励风格|
|
||
|🟢 高级|描述动效与功能|数字用翻牌动画（flip clock），背景加粒子飘落效果，加一句每天随机更换的励志名言，倒计时归零时触发撒花庆祝动画|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|setInterval 定时器|每秒触发时间计算与 DOM 更新|
|
||
|时间计算|目标日期与当前日期的差值换算（天/时/分/秒）|
|
||
|CSS 翻牌动画|`rotateX` + 前后两个面的 3D 翻转效果|
|
||
|粒子系统|数组管理粒子对象的生成、运动、消亡循环|
|
||
|Math.random()|粒子位置/速度随机化，名言随机取值|
|
||
|事件触发|倒计时归零时执行庆祝动画的条件判断|
|
||
|
||
---
|
||
|
||
## 项目 09 · ⌨️ 打字速度测试
|
||
|
||
**难度：** ⭐⭐⭐ 初中级
|
||
|
||
**📌 教学重点：** 字符串逐字比对逻辑与计时系统。交互完整，结果可量化，学生有强烈的想要挑战自己成绩的动力。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述功能类型|做一个打字练习页面|
|
||
|🔵 中级|描述核心功能|做一个打字测速页面，显示一段文字让用户跟着输入，计时并统计WPM（每分钟字数）和正确率|
|
||
|🟢 高级|描述细节与体验|正在输入的字符高亮显示，打错的字母变红，倒计时60秒自动结束，结束后展示速度/准确率/错误数三项成绩，加重试按钮和难度切换|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|字符串比对|逐字符对比用户输入与目标文本的算法|
|
||
|键盘事件|`input` / `keydown` 事件捕获用户输入|
|
||
|动态样式渲染|正确/错误/当前字符的不同颜色类名切换|
|
||
|Date 计时|`Date.now()` 记录开始时间，计算已用秒数|
|
||
|WPM 计算|（正确字符数 / 5 / 分钟数）的公式实现|
|
||
|倒计时控制|`setInterval` 60秒倒计时与自动结算逻辑|
|
||
|
||
---
|
||
|
||
## 项目 10 · 🎮 贪吃蛇
|
||
|
||
**难度：** ⭐⭐⭐⭐⭐ 高级
|
||
|
||
**📌 教学重点：** 逻辑拆解能力的综合考验，最能区分学生的思维层次。涉及游戏主循环、碰撞检测、数据结构等核心编程概念。
|
||
|
||
### Prompt Chain 三阶进化
|
||
|
||
|阶段|提示词关键词|Prompt 示例|
|
||
|---|---|---|
|
||
|🟡 初级|描述游戏类型|帮我用网页做一个贪吃蛇游戏|
|
||
|🔵 中级|描述游戏要素|做一个贪吃蛇游戏，20×20格子，有分数显示，游戏结束弹出重新开始按钮，像素风格配色|
|
||
|🟢 高级|描述功能扩展细节|加三档难度（速度不同），食物随机出现时有闪烁动画，蛇身用渐变色，撞墙/咬自己有震动屏幕效果，历史最高分存到 localStorage，支持手机触屏滑动控制|
|
||
|
||
### 知识与技能点
|
||
|
||
|知识点类别|具体内容|
|
||
|---|---|
|
||
|Canvas 绘图 API|`fillRect`、`clearRect` 绘制格子、蛇身、食物|
|
||
|游戏主循环|`setInterval` 控制帧率，每帧清屏 → 更新 → 绘制|
|
||
|二维数组网格|用坐标对象数组表示蛇身的数据结构|
|
||
|碰撞检测|边界碰撞和蛇身自碰的坐标比对算法|
|
||
|方向控制|键盘/触屏事件 → 方向变量 → 蛇头坐标更新|
|
||
|Canvas 渐变色|`createLinearGradient` 绘制渐变蛇身|
|
||
|localStorage|历史最高分的存取与比较|
|
||
|触屏事件|`touchstart` / `touchend` 计算滑动方向|
|
||
|
||
---
|
||
|
||
## 知识点覆盖总览
|
||
|
||
|知识点|涉及项目|
|
||
|---|---|
|
||
|CSS 布局（Flex/Grid）|项目 01、02、05、07|
|
||
|CSS 动画与过渡|项目 01、03、06、08|
|
||
|JS DOM 操作|项目 02、03、04、09|
|
||
|事件处理|项目 02、06、09、10|
|
||
|数组/对象数据处理|项目 02、04、07、08|
|
||
|定时器（setInterval）|项目 03、08、09、10|
|
||
|Canvas 绘图|项目 07、10|
|
||
|Math 数学计算|项目 07、08、09、10|
|
||
|CSS 3D 变换|项目 05、06、08|
|
||
|localStorage|项目 10|
|
||
|响应式设计|项目 05、06|
|
||
|剪贴板 / 原生 API|项目 04|
|
||
|
||
---
|
||
|
||
## 教学建议
|
||
|
||
### 按难度分组使用
|
||
|
||
|分组|项目|适用场景|
|
||
|---|---|---|
|
||
|视觉类（入门）|天气卡片、渐变配色生成器、倒计时页|纯样式驱动为主，零 JS 逻辑压力，适合第一单元|
|
||
|交互类（初中级）|点餐菜单、音乐播放器、商品详情页|DOM 操作与事件处理，数据驱动视图的关键过渡|
|
||
|逻辑类（中高级）|打字速度测试、个人作品集|复杂状态管理和响应式布局，体现编程思维|
|
||
|综合类（挑战）|抽奖转盘、贪吃蛇|Canvas 绘图与游戏逻辑，最能区分学生能力层次|
|
||
|
||
### Prompt Chain 课堂演示建议
|
||
|
||
每个项目的三阶提示词可直接作为课堂演示素材：让学生分别用初级、中级、高级提示词在平台上生成页面，对比三个版本的差异，亲身感受「提示词精度」对最终页面质量的直接影响。建议引导学生在课后自行从初级提示词出发，尝试升级为高级提示词，作为作业提交。 |