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 课堂演示建议
每个项目的三阶提示词可直接作为课堂演示素材：让学生分别用初级、中级、高级提示词在平台上生成页面，对比三个版本的差异，亲身感受「提示词精度」对最终页面质量的直接影响。建议引导学生在课后自行从初级提示词出发，尝试升级为高级提示词，作为作业提交。
