第21章 模块A全真模拟与复盘

从"做完"到"做精"的最后一公里 ｜ 课型：实习课 ｜ 建议课时：4节

🏠 返回总目录 / 第21章

🎯 学习目标

知识目标

  • 掌握全真模拟的流程与时间纪律
  • 掌握十三任务技术速查要点
  • 掌握复盘方法：错题本与得分日志
  • 了解完整赛项的模块衔接

能力目标

  • 能在2小时内完成模块A模拟赛
  • 能用速查表快速回忆每题技术要点
  • 能撰写规范的复盘报告

德育目标

  • 培养赛场心理素质与抗压能力
  • 养成复盘反思的持续改进习惯

教学重点

  • 模拟赛流程还原
  • 十三任务速查表
  • 复盘四步法

教学难点

  • 时间压力下的取舍决策
  • 从"功能完成"到"评分点全覆盖"的意识转变

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

▶ 十三任务技术速查卡

点击任务卡片展开技术要点与评分点——赛前5分钟速览工具。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，逐张点击展开速查卡
  2. 重点关注橙色边的3分题
  3. 合上卡片尝试默背每题技术要点
  4. 赛前5分钟快速过一遍全部卡片

效果观察点

  • 数据驱动渲染：数组→DOM
  • 3分题用不同颜色突出
  • toggle展开收起交互
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模块A十三任务速查</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; background: #f2f6f8; margin: 0; padding: 24px; }
  h1 { color: #123a52; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
  .card { background: #fff; border-radius: 10px; padding: 16px; cursor: pointer;
          border-left: 5px solid #0f8c7f; box-shadow: 0 2px 8px rgba(18,58,82,.08); }
  .card.hi { border-left-color: #c05a1e; }
  .card h3 { margin: 0 0 4px; color: #123a52; font-size: 16px; }
  .score { color: #c77728; font-size: 13px; }
  .detail { display: none; margin-top: 10px; font-size: 14px; color: #1f2a33; line-height: 1.7; }
  .card.open .detail { display: block; }
</style>
</head>
<body>
  <h1>🎯 模块A十三任务速查（点击展开）</h1>
  <div class="grid" id="grid"></div>
<script>
  const TASKS = [
    ['1 CSS网格', 1, 'grid-template-areas命名区域；主区:侧栏=2:1'],
    ['2 Hello World描边', 2, 'SVG text + stroke-dasharray/offset + 双动画时序'],
    ['3 正方形变圆', 2, '@keyframes: scale(.2)+radius:50%+透明背景；cubic-bezier'],
    ['4 灰度图', 1, 'filter: grayscale(1)；hover还原彩色；transition平滑'],
    ['5 现代布局', 2, '响应式卡片网格；移动优先媒体查询'],
    ['6 七段计时器', 3, '七段灭段表+setInterval(10ms)+进位链+三按钮'],
    ['7 旋转立方体', 3, 'preserve-3d+六面装配+双轴5s旋转动画'],
    ['8 加载动画', 1, '多元素animation-delay队列'],
    ['9 绘图画布', 2, 'mousedown/move/up+lineTo+getBoundingClientRect'],
    ['10 RGB滑块', 2, 'range×3+input事件+模板字符串rgb()'],
    ['11 JS算术', 3, '拒绝eval！递归下降四层解析'],
    ['12 JS拖动', 2, 'Pointer Events+setPointerCapture+偏移修正'],
    ['13 切片过渡', 2, '表格切片+background-position+依次动画']
  ];
  const grid = document.getElementById('grid');
  TASKS.forEach(([name, score, tip]) => {
    const c = document.createElement('div');
    c.className = 'card' + (score === 3 ? ' hi' : '');
    c.innerHTML = '<h3>任务' + name + '</h3><div class="score">' + score + '分</div>' +
                  '<div class="detail">⚡ ' + tip + '</div>';
    c.addEventListener('click', () => c.classList.toggle('open'));
    grid.appendChild(c);
  });
</script>
</body>
</html>

📋 实习任务书

任务目标：完成一次全真模拟并写出复盘报告

任务内容与评分
任务1：完成赛前环境检查清单（10分）
任务2：2小时内完成模块A全部13题（40分）
任务3：按CIS标准为同伴评分并写出评语（20分）
任务4：撰写复盘报告：丢分点/原因/改进（20分）
任务5：更新个人训练日志（10分）

自我评价

📚 课后作业与预习