原生HTML/CSS/JS实战：草莓购物商城网页开发全解析

又到了期末交大作业的季节。每年这个时候，都会有不少同学从早到晚蹲在宿舍跟 HTML、CSS、JavaScript 死磕。今天这篇，我就拿一个非常典型的题目——一个草莓主题的购物商城网页——完整拆给你看。这个项目不依赖任何框架，就是用原生 HTML + CSS + JavaScript 完成一个带商品展示、购物车、结算交互的商城页面，既能满足期末大作业的考核要求，也能让你在答辩时真正讲出东西来。全文我会从页面骨架、样式设计、JS 交互、问题排查四个角度展开，每一步都附上代码和踩坑记录，无论你现在是刚入门还是已经能写一些基础页面，都能直接照着改出一份自己的作业。

先说清楚这个项目能解决什么问题。期末大作业最怕的不是功能多，而是“看起来流水账”：几个页面、几张图片、一段复制来的代码，老师一眼看穿。草莓商城的优势在于主题明确，视觉风格统一，功能闭环完整——从浏览商品、加入购物车到填写结算信息，一套流程下来，前端三大件全用上了。而且整体难度可控，不需要掌握什么高深算法，重点考察你的动手能力、代码组织能力和基础调试能力，这些都是课程要真正检验的东西。

1. 项目整体设计与页面骨架：先想清楚再动手

1.1 期末大作业到底在考察什么：先把需求拆明白

很多同学拿到题目就开始写代码，写了一半发现结构乱了，再推倒重来。这种挫败感我太懂了。其实先花二十分钟把需求拆透，后面能省出半天的改代码时间。

一个典型的 HTML+CSS+JS 商城作业，课程老师的评分点通常可以拆成三块：第一块是 HTML 结构是否合理，有没有使用语义化标签，页面信息层次是否清楚；第二块是 CSS 是否完成响应式布局、视觉效果是否美观，有没有使用 Flexbox 或 Grid，动画和过渡效果是否自然；第三块是 JavaScript 交互是否完整，比如轮播图能不能自动播放、点击按钮能不能切换分类、加入购物车后数量能不能变化、总价能不能实时计算。打分的核心不是看你功能有多炫，而是看你有没有把学过的知识点系统用出来。

草莓主题很适合这种作业，原因是它的视觉锚点非常清楚：草莓红、奶油白、叶子绿。你不需要纠结配色，像红配绿这种在别处是灾难，放在草莓身上反而是天经地义。主题统一还意味着你的 CSS 逻辑可以集中处理，比如定义几个 CSS 变量存放主色，后面所有卡片、按钮、导航栏都用一套颜色体系，整个页面的质感会非常统一。另外，你在答辩的时候也能很自然地说出“我为了强化草莓品牌氛围，选用了 xx 颜色、弧形元素、光效动画”这种话，这就是加分项。

1.2 页面结构规划：单页加锚点才是稳妥选择

做购物商城，第一反应可能是做三四个 HTML 页面：首页、商品列表页、购物车页、结算页。但以我做过的经验来说，期末大作业最稳妥的是单页面结构，用锚点导航把不同的内容区域组织在一个页面里。原因有三个：一是多页面涉及跳转传参、状态共享，你要用 localStorage 或 URL 参数去处理，工作量明显增加；二是老师打开你的项目，点导航就往下滚，过程流畅，比来回跳页面体验好得多；三是 jQuery 插件之类的不太好用，但单页里的 JS 交互都是你控制自如的原生代码，出问题好排查。

我建议的页面结构是固定的五个大区。顶部导航区，包含 logo、菜单、购物车按钮和结算入口；Banner 轮播区，放草莓主题的宣传图，三张图循环切换；商品展示区，采用网格布局显示草莓相关商品，每张卡片包含图片、名称、价格、简介和“加入购物车”按钮；购物车浮层，点击顶部购物车按钮弹出，展示已选商品列表、单价、数量和总价；结算区，用一个模态框承载表单，填写收货信息后提交，提交成功后给出提示。这个信息架构一页就能装完，逻辑闭环，也是商城类网页最常见的主流布局。

页面内部用 <a href="#section-products"> 做锚点跳转，CSS 里给目标区域加 scroll-margin-top: 80px，这样跳转过去以后标题不会被导航栏盖住，这个小细节也是答辩时的展示点。

1.3 代码文件和目录怎么组织：让老师一眼看懂

文件命名和目录规范容易被忽略，但在期末评分里其实很加分。我见过不少交上来的作业，HTML 文件名带拼音缩写，CSS 全部堆在一个文件里，图片名称全是 1.png、2.png，打开工程让人看得头大。你既然要做正经商城，就把工程结构组织得像个产品，而不是临时拼凑的草稿。

下面是我推荐的目录结构：

text复制strawberry-mall/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── banner-1.jpg
    ├── banner-2.jpg
    ├── banner-3.jpg
    ├── goods-strawberry.jpg
    ├── goods-cake.jpg
    └── goods-juice.jpg

HTML、CSS、JS 三层分离，所有页面引用同一份样式表和脚本文件，这就是 Web 开发里结构、表现、行为分离的思路。说句实在话，很多同学上课听“高内聚低耦合”听得云里雾里，看完这个目录结构应该就明白了。另外图片文件建议按用途统一前缀：banner 是轮播图，goods 是商品图，icon 是图标，这样多人协同或者自己后期维护都不容易乱。

在 index.html 的文件头位置，记得加一句 <meta name="description" content="草莓主题购物商城">。这行代码不直接影响评分，但能体现你对 SEO 和无障碍的基础了解，答辩时随口提一句会让老师觉得你不是只会写界面。

2. 草莓主题视觉系统：配色、材质与CSS动效

2.1 草莓商城的“颜值”怎么定：配色与字体方案

我一直觉得，一个商城的视觉风格决定了老师的第一印象。你不用会专业设计，但至少要掌握主题提炼的能力。草莓的核心视觉关键词是：鲜红、多汁、甜、轻快。转换到设计的语言就是：高饱和的红色系、圆润的卡片、柔和的光影、精致的漂浮感。

建议用 CSS 变量统一管理主题色。可以在 :root 里定义这样一组变量：

css复制:root {
  --primary: #ff4d6d;       /* 草莓红 */
  --primary-light: #ff8fa3;
  --cream: #fff5f2;         /* 奶油白 */
  --leaf: #4caf7d;          /* 叶绿 */
  --gold: #ffbe0b;          /* 点缀色，用于价格标签 */
  --shadow-sm: 0 2px 8px rgba(255, 77, 109, 0.15);
  --radius: 16px;
  --font-main: "PingFang SC", "Microsoft YaHei", sans-serif;
}

字体选择上，尽量不用需要外部加载的网页字体，因为期末答辩现场经常会有没网的情况，字体加载失败会打乱布局。系统字体栈足够安全，宋体和黑体之间的搭配不要混用。我习惯在 body 上统一设置 font-family，再对数字和价格用 font-variant-numeric: tabular-nums，这样合计金额变化时数字宽度一致，跳数字时不会左右晃动，这个小细节会让页面显得专业很多。

背景不要用纯白，用淡淡的奶油色打底，再在首屏加一条上浅下深的渐变，视觉上会有一种从清晨奶油到午后草莓的过渡感。商品卡片用白色配合圆角和阴影，形成“浮在奶油上”的材质差异。说到底，主题视觉就是对颜色、材质、光影三个维度的统一设计，做到这三点，你的页面质感已经赢过一半同学了。

2.2 导航栏和Banner轮播：第一屏要抓眼

第一屏是老师打开页面的前五秒，决定他对你作品的直观印象。导航栏建议固定定位，用 position: fixed 加半透明毛玻璃背景，下面是具体实现思路。

HTML 结构上，导航栏包含 logo、菜单列表、购物车入口三个部分：

html复制<header class="navbar">
  <div class="container nav-wrap">
    <a class="logo" href="#home">
      <span class="logo-icon">🍓</span>
      BerryMall
    </a>
    <nav class="nav-menu">
      <a href="#home">首页</a>
      <a href="#products">上新</a>
      <a href="#specials">特惠</a>
      <a href="#contact">联系</a>
    </nav>
    <button class="cart-btn" id="cartBtn">
      购物车 <span class="cart-badge" id="cartBadge">0</span>
    </button>
  </div>
</header>

这里用了 button 而不是 div，原因是购物车本质上是个可点击的交互按钮，原生 button 标签自带键盘访问能力和点击语义。现在前端讲无障碍访问，你用一个 div 去模拟按钮，老师问起来不好解释。

轮播图是商城页面的重头戏。我推荐最简单的做法：三张图片横向排列在一个容器里，用 JS 修改容器的 transform: translateX(-xxx%) 来实现切换，CSS 上用 transition: transform .5s ease 做平滑滑动动画。这里有个关键点：不要用 display: none 切换图片，因为 display 属性无法做过渡动画，图片会出现“咯噔”一下的生硬闪烁。用位移切换则始终保留图片层，滑动过程非常丝滑。

JS 核心逻辑是维护一个当前索引，然后定时器每隔 4 秒让索引加一，加到底后再回到零。等会在常见问题里我会专门说定时器叠加的坑，这里先记住一句口诀：轮播切图用 translate，定时器用完要 clear。

2.3 让商品卡片“活”起来：涟漪光圈与3D旋转实战

CSS 动效是拉开分差的地方。老师普遍喜欢看到页面里有一点经得起追问的动画，而很多同学只会套一个 hover 变色。这里我结合热搜里的“css 涟漪光圈扩散”和“transform: rotateY(60deg) translateZ(300px)”这两个词，给你拆两个实战技术点。

涟漪光圈扩散，简单理解就是鼠标移入按钮时，一个圆形光圈从点击位置向外扩散，像水面涟漪一样。实现思路是用伪元素做圆形，初始缩放为 0，hover 时放大到目标尺寸，透明度从 0.5 降到 0。代码如下：

css复制.ripple-btn {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  cursor: pointer;
}

.ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.6;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.ripple-btn:hover::after {
  transform: translate(-50%, -50%) scale(3);
  opacity: 0;
}

核心原理就一句话：伪元素 + overflow hidden + scale/opacity 过渡。溢出隐藏保证光圈只在按钮范围内扩散，scale 控制扩散程度，opacity 制造淡出效果。这种动效用纯 CSS 就能搞定，不需要 JS，而且代码量很小，性价比极高。

再说 CSS 3D 旋转。热搜里那句 transform: rotateY(60deg) translateZ(300px)，我推测是有人在做 3D 卡片轮播或者环绕展示墙。这个变换的意思很容易理解：先让元素绕 Y 轴旋转 60 度，再沿着旋转后的方向向外平移 300 像素。你可以把它想象成一个草稿纸贴在门上，先把纸斜过来 60 度，再垂直于纸面往外拉 300 像素。多个元素配合不同角度，就能围成一个圆周，形成 3D 环绕墙的效果。

使用 3D 变换时，记得在父容器上加 perspective: 1000px，不然旋转后的元素没有纵深感。元素自身加 transform-style: preserve-3d，保证子元素也处于同一 3D 空间。这个技术在展示草莓系列商品时可以做成环形展示，答辩时讲一句“用 rotateY 制造空间感，translateZ 控制景深”，专业度直接拉满。不过我也要提醒你，3D 效果在低端电脑上偶尔会掉帧，期末展示前最好在答辩用的电脑上测一遍，如果卡顿，就把 rotateY 角度调小或者直接砍掉 3D，换回普通网格布局。

2.4 商品卡片的细节设计：从扁平到轻盈

商品卡片是商城最核心的容器，它的质感直接影响购买欲。草莓系列商品的卡片我建议做成圆角大、阴影柔和、底部留一条红色渐变描边的风格。卡片内部结构从上到下依次是：商品图片、名称、简介、价格行和操作按钮。

图片区域建议固定宽高比，用 aspect-ratio: 1 / 1，避免图片加载前后页面高度跳动。图片默认 object-fit: cover，超出容器时裁剪，这样无论你拍的图片是横是竖，都能在卡片里保持统一构图。hover 时图片做轻微放大，这个用图片内层 transform: scale(1.05) 加过渡实现，注意放大的是图片本身而不是外层卡片，否则会把卡片内容撑开。

价格行不要只是干巴巴的数字。可以把原价用删除线表示，现价用大号加粗的红字，旁边再挂一个“限时 7 折”的小标签。下面是价格行的实现思路：

html复制<div class="price-row">
  <span class="price-now">¥29.9</span>
  <span class="price-old">¥42.0</span>
  <span class="tag">限时7折</span>
</div>

css复制.price-now {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}
.price-old {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}
.tag {
  font-size: 12px;
  background: var(--gold);
  color: #8a5a00;
  padding: 2px 8px;
  border-radius: 4px;
}

删除线用 text-decoration: line-through 就可以，对比感立刻出来。价格数字建议保留一位小数，显得更真实。这类细节多打磨几处，整份作业的完成度就上去了。

3. 购物商城核心逻辑：JavaScript从数据到交互

3.1 商品数据怎么组织：从硬编码到数据驱动

很多同学会把商品直接写在 HTML 里，复制粘贴五个卡片就完事。这样做能不能交作业？能。但老师如果问“我想再加一个商品怎么办”，你只能告诉他“再复制一个卡片”。数据驱动是前端开发的基本思想，和语言无关，你可以在作业里提前用上。

我建议用一个数组保存所有商品信息，然后用 JavaScript 循环渲染商品列表。每件商品都包含编号、名称、价格、原价、图片地址和标签：

javascript复制const products = [
  {
    id: 1,
    name: "草莓鲜果盒",
    desc: "现摘丹东草莓，颗颗饱满",
    price: 29.9,
    oldPrice: 42.0,
    img: "images/goods-strawberry.jpg",
    tag: "热卖"
  },
  {
    id: 2,
    name: "草莓慕斯蛋糕",
    desc: "6寸动物奶油，草莓夹心",
    price: 88.0,
    oldPrice: 118.0,
    img: "images/goods-cake.jpg",
    tag: "新品"
  }
];

渲染的时候用模板字符串拼接 HTML，再统一插入商品网格容器：

javascript复制const grid = document.querySelector("#products .goods-grid");

function renderProducts() {
  const html = products.map(p => `
    <div class="goods-card" data-id="${p.id}">
      <div class="goods-img-wrap">
        <img src="${p.img}" alt="${p.name}">
      </div>
      <h3>${p.name}</h3>
      <p class="goods-desc">${p.desc}</p>
      <div class="price-row">
        <span class="price-now">¥${p.price.toFixed(1)}</span>
        <span class="price-old">¥${p.oldPrice.toFixed(1)}</span>
        <span class="tag">${p.tag}</span>
      </div>
      <button class="add-btn" data-id="${p.id}">加入购物车</button>
    </div>
  `).join("");
  grid.innerHTML = html;
}

这段代码的好处是：商品的增删改不再动 HTML，只需要改数组，页面刷新后就会自动渲染。而且把 data-id 放在卡片和按钮上，后面写购物车事件时可以通过 dataset 拿到商品编号，非常方便。我称之为“数据结构化”，这不仅是培训班爱讲的炫点，更是真实前端项目里一定会用到的工程思维，答辩时你直接说“我的数据层和视图层是分离的”，这句话的分量很大。

3.2 购物车核心操作：加购、数量修改、总价计算

购物车是所有商城的灵魂。零基础实现购物车，建议先做一个数组，数组中每一项是一个对象，包含商品信息和数量。加购的时候，如果商品已存在，数量加一；不存在，就推入一条新记录。这里有个非常经典的 JS 操作：find 查找。

javascript复制let cart = [];

function addToCart(id) {
  const product = products.find(p => p.id === id);
  if (!product) return;
  const exist = cart.find(item => item.id === id);
  if (exist) {
    exist.count++;
  } else {
    cart.push({ ...product, count: 1 });
  }
  renderCart();
  updateCartBadge();
}

cart.find(...) 返回满足条件的第一项，找不到就返回 undefined。这个 API 一定要熟悉，面试和期末答辩都爱问。展开运算符 { ...product, count: 1 } 是把商品对象的所有属性复制到新对象里，额外加上数量字段，这样做是为了避免直接修改 products 数组里的原数据，保证商品列表价格不会被购物车操作污染。

再来渲染购物车列表。购物车通常放在一个侧滑抽屉或弹窗里，每一项展示图片、名称、单价、数量控制和删除按钮。数量控制有两个按钮：“-”和“+”，分别绑定减少和增加事件。减少到 1 时再减，建议直接移除该项，或者设置最小值为 1 让用户手动删，两种都可以，但逻辑要统一。我习惯在减少时做判断，数量为 1 则调用 remove 方法移出购物车，这样逻辑更干净。

总价计算是购物车的核心公式。你要遍历购物车每一项，把 单价 乘以 数量 累加：

javascript复制function calcTotal() {
  return cart.reduce((sum, item) => sum + item.price * item.count, 0);
}

reduce 第一次接触可能不太好懂，你就记着它的口诀：初始值是 0，每次把当前总和 sum 加上当前商品的小计，循环完返回最终结果。配合 toFixed(2) 保留两位小数显示在页面上。

购物车角标也要同步更新。角标显示的是购物车内所有商品数量的总和，用 reduce 把每个商品的 count 加起来即可：

javascript复制const totalCount = cart.reduce((sum, item) => sum + item.count, 0);

这样点击“加入购物车”时，右上角红色角标会实时跳动，整个交互闭环就成立了。页面底部可以再放一个“去结算”按钮，点击后弹出结算对话框。

3.3 结算与优惠逻辑：表单校验和促销码

结算交互是商城项目能拿高分的另一个切入口。很多同学的商城点“去结算”只会弹一个 alert 完事，但完整一点的结算应该包括：弹出模态框、填写收货人信息、填写手机号、校验表单、应用优惠码、计算实付金额、提交后弹出成功提示并清空购物车。

这里的关键知识点是表单校验。不用引入任何库，用原生 JS 就可以。手机号校验用正则表达式：/^1[3-9]\d{9}$/，这个正则的含义是第一位数字 1，第二位是 3 到 9，后面跟着 9 个数字，正好 11 位。收货人姓名要求非空，地址要求长度不少于 5 个字。校验不通过时，在对应输入框下方显示红色提示文字，同时把输入框边框变红，通过后恢复原状。

优惠码可以设计成“BERRY10”满 69 减 10，“STRAWBERRY20”满 99 减 20。结算时读取输入框的值，进行匹配：

javascript复制function checkCoupon(code) {
  const map = {
    "BERRY10": { min: 69, cut: 10 },
    "STRAWBERRY20": { min: 99, cut: 20 }
  };
  const rule = map[code];
  if (!rule) {
    alert("优惠码无效");
    return 0;
  }
  if (total < rule.min) {
    alert("未满足优惠使用门槛");
    return 0;
  }
  return rule.cut;
}

这个优惠逻辑就是从“价格规则”到“最终价格”的映射。你可以把优惠码看作是 JS 对象查找，本质是键值对的匹配。代码不复杂，但老师会认为你的交互设计是完整的电商流程，而不是一个只有展示功能的静态页面。

提交成功后，清空购物车数组，重新渲染页面，同时弹出一个成功浮层，显示“订单已提交，预计 3 天送达”。这个成功的动效用模态框淡入淡出即可，注意模态框关闭时，要把表单清空，避免下次打开时还残留上次填写的内容。

3.4 事件委托：为什么监听父容器能少写一半代码

商品列表里有几十个“加入购物车”按钮，如果你给每个按钮单独绑定事件，代码会很难维护。正确的做法是事件委托：在父容器上绑定一次监听，通过事件对象的 target 属性判断点击的是不是按钮，再决定要不要执行加购逻辑。这个知识点非常值得掌握，我在前面 3.1 里就隐隐埋了一笔，现在展开讲。

javascript复制document.querySelector(".goods-grid").addEventListener("click", (e) => {
  const btn = e.target.closest(".add-btn");
  if (!btn) return;
  const id = Number(btn.dataset.id);
  addToCart(id);
});

e.target.closest(".add-btn") 从点击的元素向上寻找最近的、满足选择器的祖先元素，找到就返回该元素，找不到返回 null。这样你只用一次事件绑定，就能处理所有新增商品按钮的点击，将来即使动态添加新商品，不需要额外绑定。这个模式在真实项目中叫事件委托，核心思想是利用冒泡机制，把监听器挂到父层级，统一处理子元素的交互。

用 Number(btn.dataset.id) 把 data 属性上的字符串转成数字，避免出现“1 + 1 = 11”这种字符串拼接的低级错误。这一类“永远是真实开发里会被强调一万次的细节”，你在代码里体现一次，就少一次被老师问住的概率。

4. 期末交作业的保命排查清单：常见问题与避坑实录

4.1 中文乱码和样式失效：文件编码与引入顺序

我做项目时碰到过的最坑的问题，就是页面里所有中文变成乱码，或者在 Chrome 打开页面以后只看见 HTML 结构，完全没有样式。这两个问题十有八九是同一个原因：文件编码和引入顺序。

中文乱码，检查两个地方。第一，你的 HTML 文件 <head> 里有没有写 <meta charset="UTF-8">，没有就补上。第二，文件本身的编码是不是 UTF-8。如果代码里写了 UTF-8，但文件实际保存成了 GBK，浏览器按 UTF-8 解析就会乱码。解决方法是：用 VS Code 打开文件，看右下角编码格式，如果是 GBK 就点击它，选择“通过编码保存”，重新保存为 UTF-8。这是编辑器操作层面的问题，面试不会问，但自己写作业一定会遇到。

样式失效分两种。一种是最常见的：<link rel="stylesheet" href="css/style.css"> 里路径写错。文件结构和引用路径不一致，要么找不到文件，要么找错目录。另一种是 CSS 文件内选择器写错了，比如类名和选择器多一个空格，样式就套不上。排查手法很简单：按 F12 打开开发者工具，切到 Console 面板，如果看到报错“Failed to load resource”，十有八九是路径问题；再切到 Elements 面板，选中有问题的元素，看右侧 Styles 面板，能直接看到应用了哪些 CSS 规则、哪些被划掉了。这个排查路径是前端调试的基础，期末答辩时你甚至会因为会看控制台而显得特别熟练。

4.2 图片404和本地预览异常：路径问题全解析

图片加载不出来也是重灾区。常见情况是：双击 index.html 文件直接在浏览器打开，图片全部 404。原因很简单，很多同学写图片路径用的是 /images/goods-1.jpg，这种以斜杠开头的写法在本地文件协议下会被解析成磁盘根目录，找不到桌面上的文件，自然是 404。正确的本地调试写法是相对路径 images/goods-1.jpg，少一个前导斜杠，问题立刻消失。

还有一种情况是图片显示的是一只小图标，说明图片路径没写错，但图片本身可能损坏或格式不对。你可以试着用编辑器打开图片，如果提示文件损坏，就重新下载或换一张图。另外图片命名也建议避开中文名称，虽然现代浏览器能识别，但某些静态服务器和老师的评审环境会出错。图片文件名统一使用英文小写加连字符，比如 goods-strawberry.jpg，稳一点。

4.3 JS运行时报错的常见坑：空指针、定时器叠加

JavaScript 运行时报错，控制台会红红一片，很多同学看到英文报错就慌。这里我给你说两个最常见的坑，以后照着排查。

第一个坑是空指针。报错通常长这样：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')。这是说你先在 JS 里通过 document.querySelector(...) 拿到一个元素，要给它加事件，但元素是 null，根本不存在。为什么会不存在？最常见的是你的 script 放在了 head 里，脚本执行时页面还没解析到那个元素。解决方法是把 <script> 放到 body 最后面，或者给脚本加 defer 属性。如果你用了 defer，浏览器会等整个 HTML 解析完再执行脚本，这样就不会拿不到元素了。

第二个坑是定时器叠加。轮播图如果你设置了 setInterval，但是在某次重新初始化时没有先清理之前的定时器，那么页面里会同时跑好几个定时器，图片切换速度忽快忽慢，甚至闪烁。正确的做法是每次启动定时器前，先执行 clearInterval(timer)：

javascript复制let timer = null;

function startCarousel() {
  clearInterval(timer);
  timer = setInterval(nextSlide, 4000);
}

养成习惯：用变量保存 timer，每次设置前先清理一次。这类细节我不多念，但你在答辩时能主动说出“我考虑到了定时器并发问题”，老师会很认可。

4.4 期末答辩突围：怎么讲才能把项目说成加分项

功能做完了，最后一步是把项目讲好。答辩不是让你照着代码念，而是有节奏地展示。我建议的讲解顺序是：先说整体效果，打开页面让老师看第一屏的视觉和轮播；然后切换到商品数据代码，说明数据驱动的方式；接着演示购物车交互，重点点出事件委托、reduce 计算总价；最后展示结算表单和优惠码逻辑，说明校验规则。

老师通常会从代码里挑几个点追问。我猜大概率会问这几个问题：为什么用语义化标签？因为利于 SEO 和无障碍阅读，页面结构清晰。为什么 CSS 用变量？方便统一主题、提高可维护性，改一个变量全局变色。为什么 JS 用事件委托？因为动态添加的商品不需要重复绑定事件，性能更好。这三个问题的答案在本文都出现过，你消化一下，能用自己的话讲出来即可。

还有一个加分操作：主动留一个简单功能的扩展思路。比如你可以在结尾跟老师说，“这个项目我目前实现了基础商城闭环，后面还可以加本地存储，刷新页面购物车不丢失，再加一个搜索框完成商品过滤”，这两句话既体现你有继续完善的能力，也展示了你对前端技术的熟悉程度。

最后分享一个我做这类作业时的体会。一开始我总喜欢把功能做得越复杂越好，后来发现期末作业的核心不是炫技，而是完整。把基础功能做到干净、清晰、可解释，比留一堆自己都解释不清的特效稳得多。做完项目后，把文件压缩成一个 zip，用英文名命名，比如 strawberry-mall.zip，再在浏览器里和老师电脑上各打开一次测试路径和样式，这些动作加起来，比你在代码里多写一百行功能都更有实际意义。按照这个思路去组织你的草莓商城，这学期的高分作业，应该就稳了。