第25章 挑战迷你竞赛项目

两小时，从题目到交付 ｜ 课型：实习课 ｜ 建议课时：4节

🏠 返回总目录 / 第25章

🎯 学习目标

知识目标

  • 掌握迷你竞赛的选题策略
  • 掌握两小时项目的时间切片法
  • 掌握演示五分钟的表达结构

能力目标

  • 能在限时内完成可演示的迷你项目
  • 能做五分钟项目演示
  • 能按交付清单自查

德育目标

  • 培养时间管理与抗压能力
  • 树立"完成大于完美"的交付意识

教学重点

  • 选题三原则：可演示/有亮点/能完成
  • 时间切片：30-60-20-10
  • 演示结构：问题→方案→亮点

教学难点

  • 限时下的范围控制
  • 演示中的应变

💻 实例演示1个实例 · 可在线运行

▶ 项目选题抽签器

点击抽取迷你竞赛题目与要求——课堂全真模拟工具。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，点击抽取题目
  2. 按时间切片制定开发计划
  3. 两小时冲刺开发
  4. 用交付清单自查
  5. 进行五分钟演示并接受互评

效果观察点

  • Math.random选题
  • 八个题目难度均衡
  • 时间切片印在页面上时刻提醒
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>迷你竞赛抽签器</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; background: linear-gradient(135deg, #0e2a3c, #1b5a7a);
         margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
         justify-content: center; color: #fff; padding: 20px; }
  .card { background: rgba(255,255,255,.1); border-radius: 16px; padding: 40px; text-align: center;
          max-width: 520px; backdrop-filter: blur(6px); }
  #topic { font-size: 26px; color: #38d6c4; margin: 16px 0; min-height: 70px; }
  #req { font-size: 15px; color: #cfe3ec; line-height: 1.8; }
  button { margin-top: 26px; padding: 12px 40px; font-size: 17px; border: none; border-radius: 30px;
           background: #c77728; color: #fff; cursor: pointer; }
  button:hover { background: #38d6c4; color: #0e2a3c; }
  .time { margin-top: 18px; font-size: 14px; color: #9fc3d4; }
</style>
</head>
<body>
  <div class="card">
    <h2>🎲 迷你竞赛抽签器</h2>
    <div id="topic">点击按钮抽取你的题目</div>
    <div id="req"></div>
    <button id="draw">开始抽签</button>
    <div class="time">限时2小时：30分钟规划 → 60分钟开发 → 20分钟打磨 → 10分钟准备演示</div>
  </div>
<script>
  const TOPICS = [
    ['倒计时器', '可设置分钟数、进度环动画、到时提醒音'],
    ['待办清单', '增删改查、localStorage持久化、完成划线'],
    ['天气预报卡', '城市切换、渐变色随天气变化、fetch模拟数据'],
    ['答题闯关', '五道题计分、对错即时反馈、成绩页'],
    ['颜色游戏', '看RGB值选色块、难度递增、计分排行'],
    ['抽奖转盘', 'canvas绘制转盘、缓动停止、中奖提示'],
    ['记忆翻牌', '4×4牌阵、翻牌配对、计时计步'],
    ['弹幕留言板', '输入发送、随机轨道飘过、速度可调']
  ];
  document.getElementById('draw').addEventListener('click', () => {
    const [name, req] = TOPICS[Math.floor(Math.random() * TOPICS.length)];
    document.getElementById('topic').textContent = '题目：' + name;
    document.getElementById('req').textContent = '核心要求：' + req;
  });
</script>
</body>
</html>

📋 实习任务书

任务目标：限时两小时完成可演示的迷你项目

任务内容与评分
任务1：抽签选题并写出MVP功能清单（15分）
任务2：60分钟内实现核心功能（35分）
任务3：界面打磨与bug修复（15分）
任务4：五分钟项目演示（25分）
任务5：复盘：时间管理得失（10分）

自我评价

📚 课后作业与预习