HTML+CSS+JavaScript从零实现电子器件商城，前端期末大作业完整指南

期末大作业这个环节，最难的不是写代码，而是不知道从哪里开始。如果你打开编辑器只看到一片空白，脑子里转着“要做一个电子器件商城”却理不出头绪，那这篇内容就是给你准备的。我会用HTML、CSS、JavaScript三个维度，把一个完整的电子器件购物商城拆成具体页面、具体模块、具体代码，从页面骨架到购物车逻辑一路过一遍。不仅告诉你每段代码干什么，还会解释为什么这么写、踩过哪些坑。

先说一下这篇内容的覆盖面：一个完整的商城项目，通常包括首页、商品列表页、商品详情页、购物车页面这几个核心页面。考虑到期末大作业的时间成本和答辩需求，我会以“一个index.html + 数据驱动渲染 + localStorage本地存储”为主线，做出来既能跑得流畅，也方便在答辩时讲清楚逻辑。就算你的课程要求多页跳转，这套思路改造成多页面结构也不难，我会在对应位置把改法一并说清楚。

1. 项目蓝图：先把商城拆成一张页面地图再动手

1.1 别做“五张页面各做各的”，要在一张图里想清楚串法

很多同学做大作业的习惯是：先写一个首页，写完再说。结果首页写完了，发现要加详情页，代码结构没留余地，后面全在打补丁。做商城这种项目，第一步不是打开编辑器，而是拿出一张纸，把“用户会点什么、点了之后去哪”画出来。

我建议把商城拆成这几个页面角色：

如果你选的题目是“电子器件商城”，商品分类可以这样拆：开发板、传感器、无线模块、显示模块、电源模块、电子工具。这个分类本身也在向老师传递一个信息——你有意识地组织过商品体系，而不是随机罗列。

页面之间的串联方式要提前定好：导航栏每个分类项，跳转到 list.html?category=传感器；商品卡片点击，跳转到 detail.html?id=3；加入购物车成功后，通过 location.href 跳到购物车页。URL参数传值这个知识点，在答辩时几乎必被问到，所以千万别只是“能用”，要能讲清楚。

1.2 数据先行：数组模拟数据库，页面只是数据的“展示层”

商城项目最核心的思维转变是：数据要和页面分离。大学生最容易犯的错是把商品信息一个个硬编码在HTML标签里，好像首页写两个商品、列表页再写一遍，这会让代码冗余、后期改价格要改好几个地方。

正确做法是，把商品数据集中放在一个 JavaScript 数组中，页面通过遍历数组来动态生成。这个数组就是一个“内存数据库”，商品数据长这样：

javascript复制const products = [
  { id: 1, name: 'STM32F103C8T6 最小系统板', category: '开发板', price: 19.9, oldPrice: 29.9, sales: 326, rating: 4.8, image: 'img/stm32.jpg', desc: '基于ARM Cortex-M3内核，主频72MHz' },
  { id: 2, name: 'ESP8266 WiFi 模块', category: '无线模块', price: 12.5, oldPrice: 18.0, sales: 410, rating: 4.6, image: 'img/esp8266.jpg', desc: '支持串口转WiFi，可远程控制' },
  { id: 3, name: 'HC-SR04 超声波测距模块', category: '传感器', price: 6.8, oldPrice: 8.5, sales: 523, rating: 4.9, image: 'img/hcsr04.jpg', desc: '2cm-400cm非接触式距离测量' },
  // 继续扩充到 12~16 个商品
];

每条数据的字段名要尽量规范：id 唯一标识、name 商品名、category 所属分类、price 现价、oldPrice 原价（做划线价）、sales 销量（做排序）、rating 评分、image 图片路径、desc 简要描述。

当商品数据独立成一个数组之后，后续所有功能都围绕这一个数组转：筛选是对数组做 filter，排序是对数组做 sort，详情页是根据 id 用 find 找到指定商品。页面上的所有变化，本质上都是“重新渲染数组”。

1.3 目录结构：从第一天就按照规范建文件夹

我见过太多学生把JS、CSS、图片全部平铺在一个文件夹里，文件名还是 新建文本文档(2).txt。这会在答辩演示时给老师留下非常不好的印象。合理的目录结构应该是分层的：

text复制electronics-mall/
├── index.html          # 首页
├── list.html           # 商品列表页
├── detail.html         # 商品详情页
├── cart.html           # 购物车页
├── css/
│   ├── common.css      # 全局公共样式（变量、重置、导航、页脚）
│   └── index.css       # 首页专属样式
├── js/
│   ├── data.js         # 商品数据数组
│   ├── common.js       # 公共逻辑：导航高亮、购物车角标
│   ├── index.js        # 首页逻辑：轮播、推荐商品渲染
│   ├── list.js         # 列表页逻辑：筛选、排序、渲染
│   ├── detail.js       # 详情页逻辑：根据URL参数展示商品
│   └── cart.js         # 购物车逻辑：增删改查、金额计算
└── img/                # 图片资源

命名规范也统一一下：文件名一律小写英文，单词之间用短横线连接。JS文件职责分离，“数据”“公共逻辑”“页面专属逻辑”分开写，这样答辩的时候你能清清楚楚地说出“这是数据层、这是公共组件、这是页面业务逻辑”——光是这一点，就比大多数同学高一个段位。

2. 从“能看”到“耐看”：CSS布局与样式打磨

2.1 Flex布局：一份能说清原理的排版方案

CSS布局是大作业最容易“翻车”的地方，也是老师重点看的地方。很多同学还在用 float 一行行飘，飘完还得用 clearfix 清理浮动，又麻烦又容易出问题。我强烈建议直接上 Flex布局，一是代码量少，二是在答辩时你能讲清楚“容器和项目”的关系，这本身就是加分点。

拿顶部导航栏举例，结构是这样的：

html复制<header class="navbar">
  <div class="logo">芯选商城</div>
  <nav class="menu">
    <a href="index.html">首页</a>
    <a href="list.html?category=开发板">开发板</a>
    <a href="list.html?category=传感器">传感器</a>
    <a href="list.html?category=无线模块">无线模块</a>
  </nav>
  <div class="search-box">
    <input type="text" placeholder="搜索电子器件">
    <button>搜索</button>
  </div>
  <div class="cart-icon">
    <a href="cart.html">购物车<span id="cartBadge">0</span></a>
  </div>
</header>

对应CSS：

css复制.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  background: #1a1a2e;
  position: sticky;
  top: 0;
  z-index: 999;
}
.menu {
  display: flex;
  gap: 20px;
}
.menu a {
  color: #eee;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 4px;
  transition: background 0.3s;
}
.menu a:hover {
  background: rgba(255, 255, 255, 0.15);
}

display: flex 把导航栏变成了一个弹性容器，里面的四个模块横向排列；justify-content: space-between 让它们“两端对齐、中间均匀分布”；align-items: center 保证垂直居中。这三个属性是Flex布局最核心的组合，用熟练了，绝大多数排版问题都能解决。

商品卡片的栅格布局也可以用Flex的 flex-wrap 实现，不需要任何第三方框架：

css复制.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  width: calc(25% - 20px);
  box-sizing: border-box;
}

这里有个初学者经常忽略的点：如果 card 想排成每行四个，宽度要减去 gap 占掉的份额。calc(25% - 20px) 正是解决办法。另外 box-sizing: border-box 必须加上，否则padding会把宽度撑破，整行布局直接乱掉。

2.2 CSS变量：统一设计语言的小技巧

商城界面最容易“显土”的原因，是颜色不统一——这里一个蓝色、那里一个红色，看起来像拼凑出来的。解决这个问题，不用去学什么新框架，用CSS变量就够了。

在 css/common.css 顶部定义一套设计变量：

css复制:root {
  --primary-color: #e94560;      /* 主色调：按钮、价格、强调 */
  --bg-color: #f5f6fa;           /* 页面背景 */
  --card-bg: #ffffff;            /* 卡片背景 */
  --text-main: #1a1a2e;          /* 主文字 */
  --text-sub: #777;              /* 辅助文字 */
  --radius: 12px;                /* 圆角 */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* 卡片阴影 */
  --transition: all 0.3s ease;   /* 过渡动画 */
}

定义之后，页面里所有按钮、价格、链接的颜色都引用变量：

css复制.card .price {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: bold;
}
.add-btn {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  transition: var(--transition);
}

这样做的好处不仅是“看起来统一”，更重要的是：答辩的时候你可以说“我使用CSS自定义属性统一管理全站视觉风格，修改主题色只需要改一个变量”。这不是炫技，这是非常实际的工程化思维。

字体方面，中文站点建议用系统字体栈，兼容性最好：

css复制body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
}

字号建议做一套梯度：页面大标题24px、卡片标题16px、辅助信息12px，就够用了。不要每处都手写随机字号，看起来会乱。

2.3 hover细节：让交互有“手感”

纯粹的静态页面容易显得死板，但加几个恰到好处的 hover 效果，整个页面质感会立马上一个台阶。电子器件类商城不需要花哨，干净利落最重要。

商品卡片的hover，推荐做这三件事：轻微上浮、阴影加深、图片轻微放大：

css复制.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover img {
  transform: scale(1.05);
}

transform: translateY(-6px) 让卡片在鼠标悬停时向上浮起，box-shadow 加深配合形成“抬起来”的感觉，图片 scale(1.05) 则让视觉效果更丰满。注意给 .card 加上 overflow: hidden，否则图片放大后会溢出去。

按钮的hover也不要忽略：

css复制.add-btn:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

还有一个小细节：很多同学做出来“图片加载不出来”的尴尬情况，通常是因为 img 的 src 路径写错了。在开发阶段，建议给每张图片加上 onerror 兜底，或者先用占位图替代，避免页面出现一堆破图。

3. 页面“活”起来：JavaScript核心交互的实现逻辑

3.1 商品渲染：数据与DOM的解耦思路

前端最核心的交互思路，说穿了就一句话：数据变了，页面重新渲染。不要在HTML里写死商品，而是准备好一个容器，用JavaScript把数组渲染进去。

首页的商品推荐区，HTML里只需要一个空容器：

html复制<section class="recommend">
  <h2>本周热卖</h2>
  <div id="productGrid" class="product-grid"></div>
</section>

然后在 index.js 中渲染：

javascript复制function renderProducts(list) {
  const container = document.getElementById('productGrid');
  container.innerHTML = list.map(item => `
    <div class="card" data-id="${item.id}">
      <img src="${item.image}" alt="${item.name}">
      <div class="card-info">
        <h3>${item.name}</h3>
        <p class="desc">${item.desc}</p>
        <p class="price">¥${item.price} <span class="old-price">¥${item.oldPrice}</span></p>
        <div class="card-actions">
          <button class="add-btn">加入购物车</button>
          <a href="detail.html?id=${item.id}" class="detail-link">查看详情</a>
        </div>
      </div>
    </div>
  `).join('');
}

renderProducts(products);

这里用模板字符串（反引号）拼接HTML，比传统的字符串加号拼接要清晰得多。.map() 遍历数组，每一项返回一段HTML字符串，最后用 .join('') 把数组转成一个字符串塞进容器。

关键是：以后你想改展示逻辑，只改 renderProducts 这一个函数就行，不需要去动HTML。数据驱动页面的思路，就这么建立起来了。

列表页的筛选和排序，实际上是同一个函数的不同参数：

javascript复制let currentCategory = 'all';
let currentSort = 'default';

function getFilteredList() {
  let list = [...products];
  if (currentCategory !== 'all') {
    list = list.filter(item => item.category === currentCategory);
  }
  if (currentSort === 'price-asc') {
    list.sort((a, b) => a.price - b.price);
  } else if (currentSort === 'price-desc') {
    list.sort((a, b) => b.price - a.price);
  } else if (currentSort === 'sales') {
    list.sort((a, b) => b.sales - a.sales);
  }
  return list;
}

function refresh() {
  renderProducts(getFilteredList());
}

// 筛选按钮点击
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', function () {
    currentCategory = this.dataset.category;
    refresh();
  });
});

这个设计的关键在于：筛选条件（currentCategory、currentSort）和渲染逻辑完全分离。每次用户点击筛选或排序按钮，只是修改了状态，然后重新调用 refresh() 渲染列表。这种“状态驱动视图”的模式，已经是现代前端框架的核心思想，把它用在期末作业里，聊起来绝对有深度。

3.2 购物车：localStorage数据持久化

购物车是商城项目的灵魂功能。它的核心需求是：用户加入的商品，刷新页面后还在。这就要用到 localStorage——浏览器的本地存储，把数据持久化到硬盘上。

购物车的数据结构不复杂：用商品id作为键，数量作为值。比如 { "1": 2, "3": 1 } 表示id为1的商品买了2个、id为3的商品买了1个。

javascript复制// common.js
const CART_KEY = 'mall_cart';

function getCart() {
  try {
    return JSON.parse(localStorage.getItem(CART_KEY)) || {};
  } catch (e) {
    return {};
  }
}

function saveCart(cart) {
  localStorage.setItem(CART_KEY, JSON.stringify(cart));
}

function addToCart(id) {
  const cart = getCart();
  cart[id] = (cart[id] || 0) + 1;
  saveCart(cart);
  updateCartBadge();
}

function updateCartBadge() {
  const cart = getCart();
  const total = Object.values(cart).reduce((sum, count) => sum + count, 0);
  const badge = document.getElementById('cartBadge');
  if (badge) badge.textContent = total;
}

为什么用 JSON.parse(localStorage.getItem(CART_KEY)) || {}？因为第一次访问时，localStorage 里没有这个键，getItem 返回 null，JSON.parse(null) 返回 null，如果不加 || {}，下一行 cart[id] 就会直接报错。

为什么要把 JSON.parse 包在 try...catch 里？因为我见过太多学生遇到这个报错：Unexpected token o in JSON at position 1。原因是用户手动改了localStorage，或者上一次存的数据格式损坏了。加一层 try...catch，就算数据坏了也能兜底。

在列表页给“加入购物车”按钮绑定事件时，用事件委托最方便：

javascript复制// index.js 或 list.js
document.getElementById('productGrid').addEventListener('click', function (e) {
  const btn = e.target.closest('.add-btn');
  if (!btn) return;
  const card = btn.closest('.card');
  const id = card.dataset.id;
  addToCart(id);
  alert('已加入购物车');
});

e.target.closest('.add-btn') 的意思是：不管用户点的是按钮上的文字还是按钮本身，都向上找到最近的 .add-btn 元素。如果没有找到 .add-btn，就说明用户点的是别的地方，直接 return。这种方式比给每个按钮单独绑事件要高效得多，也符合“事件委托”这个考点。

3.3 购物车页的增删改查与金额计算

购物车页需要把存储数据“翻译”成商品信息展示出来。核心逻辑是：拿到购物车对象之后，遍历每个键值对，从 products 数组中用 find 找到对应的商品对象，然后把商品信息和购买数量拼接成一行。

javascript复制function renderCart() {
  const cart = getCart();
  const container = document.getElementById('cartList');
  const ids = Object.keys(cart);
  const cartItems = ids.map(id => {
    const product = products.find(p => p.id === parseInt(id));
    return { product, count: cart[id] };
  }).filter(item => item.product);

  container.innerHTML = cartItems.map((item, index) => `
    <tr>
      <td><input type="checkbox" class="item-check" data-id="${item.product.id}" checked></td>
      <td><img src="${item.product.image}" width="60"></td>
      <td>${item.product.name}</td>
      <td>¥${item.product.price.toFixed(2)}</td>
      <td>
        <button class="minus-btn" data-id="${item.product.id}">-</button>
        <span class="count-num">${item.count}</span>
        <button class="plus-btn" data-id="${item.product.id}">+</button>
      </td>
      <td class="subtotal">¥${(item.product.price * item.count).toFixed(2)}</td>
      <td><button class="remove-btn" data-id="${item.product.id}">删除</button></td>
    </tr>
  `).join('');

  calcTotal();
}

数量加减和删除按钮，同样用事件代理绑定：

javascript复制document.getElementById('cartList').addEventListener('click', function (e) {
  const id = e.target.dataset.id;
  if (!id) return;
  let cart = getCart();

  if (e.target.classList.contains('plus-btn')) {
    cart[id] = (cart[id] || 0) + 1;
  } else if (e.target.classList.contains('minus-btn')) {
    cart[id] = (cart[id] || 0) - 1;
    if (cart[id] <= 0) delete cart[id];
  } else if (e.target.classList.contains('remove-btn')) {
    delete cart[id];
  }

  saveCart(cart);
  renderCart();
  updateCartBadge();
});

合计金额的计算，要尊重用户勾选状态——只有被勾选的行才计入总计：

javascript复制function calcTotal() {
  const checkedItems = document.querySelectorAll('.item-check:checked');
  let total = 0;
  checkedItems.forEach(checkbox => {
    const id = checkbox.dataset.id;
    const product = products.find(p => p.id === parseInt(id));
    const count = getCart()[id];
    total += product.price * count;
  });
  document.getElementById('totalPrice').textContent = total.toFixed(2);
}

注意 toFixed(2) 的使用。JavaScript浮点运算有精度问题，0.1 + 0.2 不精确，用 toFixed(2) 可以保证金额只显示到小数点后两位。这个细节你可以在答辩的时候主动提出来，能看出你处理过真实问题。

复选框的 change 事件也要监听，不然用户取消勾选后金额不变：

javascript复制document.getElementById('cartList').addEventListener('change', function (e) {
  if (e.target.classList.contains('item-check')) {
    calcTotal();
  }
});

3.4 轮播图：自动化切换与手动控制

轮播图是首页必备的“门面”，实现原理不复杂：把若干张图片横向排在一行，外面套一个固定宽度的容器，用 overflow: hidden 裁掉溢出部分；点击左右按钮或定时器，让图片容器整体水平移动 一张图片宽度 的距离。

javascript复制let currentIndex = 0;
const slides = document.querySelectorAll('.banner-slide');
const totalSlides = slides.length;
const track = document.getElementById('bannerTrack');

function goToSlide(index) {
  currentIndex = (index + totalSlides) % totalSlides;
  track.style.transform = `translateX(-${currentIndex * 100}%)`;
}
function nextSlide() {
  goToSlide(currentIndex + 1);
}
function prevSlide() {
  goToSlide(currentIndex - 1);
}
setInterval(nextSlide, 3000);

document.getElementById('nextBtn').addEventListener('click', nextSlide);
document.getElementById('prevBtn').addEventListener('click', prevSlide);

(index + totalSlides) % totalSlides 是一个经典的取模循环逻辑，让索引在0到总数之间循环，不会越界。鼠标悬停时暂停自动播放、移开时恢复，属于体验优化，可以加上：

javascript复制const banner = document.getElementById('banner');
banner.addEventListener('mouseenter', () => clearInterval(timer));
banner.addEventListener('mouseleave', () => timer = setInterval(nextSlide, 3000));

4. 期末作业翻车实录：那些让页面“罢工”的细节

4.1 图片路径和编码问题

图片加载不出来，90%的原因是路径写错了。记住一个原则：相对路径是相对于当前HTML文件所在目录的。如果你的HTML在根目录，图片在 img 文件夹，那就写 img/xxx.jpg；如果你的HTML在 pages 文件夹，图片在根目录的 img 文件夹，那就写 ../img/xxx.jpg。../ 表示“上一级目录”。

另一个容易踩的坑是中文文件名。有的同学下载的图片原名是“开发板.jpg”，在部分浏览器和服务器环境下会乱码。建议把所有图片文件改名为纯英文小写，比如 stm32.jpg、esp8266.jpg，避免不必要的麻烦。

还有字符编码问题。如果HTML文件在保存时用的是GBK，但页面声明的是 utf-8，中文就会乱码。解决办法是：统一使用UTF-8编码保存文件，HTML头部写：

html复制<meta charset="utf-8">

最保险的做法是，用VS Code打开文件——右下角会显示当前编码——确保是UTF-8，如果不是，点击重新保存为UTF-8。这个不起眼的步骤，能救你于乱码的水火之中。

4.2 模板字符串中的onclick问题

很多同学喜欢把点击事件直接写在HTML字符串里：

javascript复制container.innerHTML = `<button onclick="addToCart(${item.id})">加入购物车</button>`;

这种做法在模板字符串里会有一个隐患：如果项目里定义了多个同名函数，或者页面加载顺序不对，addToCart 可能不在全局作用域里，点击按钮就会报 addToCart is not defined。更麻烦的是，如果商品id在拼接时出现引号冲突，还会破坏整个HTML结构。

解决这个问题有两个思路。第一个是上面推荐的事件委托思路：不在HTML里绑定事件，而是给容器统一绑定监听器，用 data-id 区分是哪个商品。第二个是坚持用行内 onclick 的话，把函数显式挂到 window 上（window.addToCart = addToCart），保证全局可用。但论可维护性和课堂讲解的便利性，事件委托明显更胜一筹。

4.3 localStorage读取时的JSON陷阱

localStorage 只能存字符串，所以保存时要 JSON.stringify，读取时要 JSON.parse。很多同学报错就报在读取这步：因为 JSON.parse 的参数必须是合法JSON字符串，如果key不存在、或者内容是 undefined、NaN 这类非JSON格式，就会抛异常。

最稳妥的读取方式是前面提过的：

javascript复制function getCart() {
  try {
    return JSON.parse(localStorage.getItem(CART_KEY)) || {};
  } catch (e) {
    return {};
  }
}

这样哪怕数据损坏，也至少返回一个空对象，页面不会白屏。如果你在调试时发现 localStorage 里的数据“看起来很怪”，F12打开控制台 → Application → Local Storage 就能直接看到存进去的原始字符串，排查起来非常直观。

4.4 flex子元素的默认压缩

Flex布局有个坑：当容器的空间不足时，子元素默认是允许被压缩的（flex-shrink: 1），这会导致你明明设置好宽度的元素被挤扁。最常见的场景是：商品卡片里文字过长，把卡片撑变形；或者导航栏里的输入框宽度被压缩成了细细一条。

解决办法是给关键子元素加上 flex-shrink: 0，禁止压缩：

css复制.search-box {
  flex-shrink: 0;
  width: 300px;
}

如果希望子元素在空间不足时能够收缩但保持最小宽度，用 min-width: 0 配合 flex-basis 控制。这个知识点虽然小，但能体现你对Flex布局的理解深度——答辩时老师问到“你了解flex子元素的收缩机制吗”，至少你能答得出来。

4.5 浏览器控制台报错排查思路

页面没反应，很多人的第一反应是瞎改代码，改完更糟。正确排查流程是：按F12打开开发者工具 → 切到Console面板 → 看报错信息。最常见的几种报错：

这里要说一个重要原则：script标签放在body末尾，或者使用 DOMContentLoaded 事件。如果把script放在head里，浏览器解析到JS时body还没生成，document.getElementById 自然找不到元素，于是报 null 错误。推荐的放置方式是：

html复制<body>
  <!-- 页面内容 -->
  <script src="js/data.js"></script>
  <script src="js/common.js"></script>
  <script src="js/index.js"></script>
</body>

script的顺序也要注意：先引入数据层（data.js）和公共层（common.js），再引入页面逻辑（index.js），否则 index.js 里使用 products 或 addToCart 时，这些变量还没定义。

5. 答辩演练与额外加分项

5.1 功能自检清单：上场之前过一遍

期末大作业最遗憾的场景不是功能太少，而是“本来写好了，演示时却崩了”。为了避免这种情况，答辩前按这个清单自检一遍：

• 首页导航是否高亮当前页面？点击分类链接是否带上了正确参数？
• 轮播图是否自动播放？悬停是否暂停？左右箭头是否可用？
• 商品列表的筛选、排序是否都正常工作？切换分类后，排序状态是否保留？
• 加入购物车后，导航栏角标是否及时更新？
• 购物车页数量减到0时是否自动删除条目？
• 刷新页面后购物车数据是否还在？
• 所有页面在缩小窗口宽度时是否基本不破坏布局？不需要完美适配手机，但至少要能看。

我特别提醒：提前把演示路径在真实的Chrome浏览器里完整走一遍，不要用编辑器的预览模式。很多编辑器内置预览不支持localStorage或者某些API，出现“我本地能跑，老师机器上白屏”的情况，多半是用了编辑器预览导致的。

5.2 可能被问到的问题，提前准备答案

老师在看期末项目时，通常不会逐个功能点验证，而是挑几个关键问题考察你是否真的理解。高频问题包括：

• “你这个商品数据存在哪里？刷新页面为什么购物车还在？” → 回答：商品数据存在内存中的数组里，是静态数据；购物车数据通过localStorage持久化到浏览器本地，所以刷新不会丢。
• “讲讲你的事件委托是怎么用的？” → 回答：我没有给每个按钮单独绑定事件，而是给父容器绑定一个监听器，通过 e.target.closest() 判断点击的是什么，再根据 data-id 处理对应逻辑。
• “如果商品数量特别多，比如一万个，你这个渲染方式会不会卡？” → 回答：当前方案是全量渲染，数据量大时确实会有性能问题。优化方向是分批渲染（比如每次渲染20个，滚动到顶部再加载下一批）或者用虚拟滚动。这个回答能展示你有性能意识。
• “CSS布局用的什么技术？” → 回答：主要用Flex布局，搭配CSS变量管理设计规范。

不要背答案，但要把这几个问题的思路提前过一遍。答辩时能自信地讲出“为什么”，比功能本身更能拿分。

5.3 低成本高回报的加分技巧

到了这个阶段，基础功能已经做完了，如果再花一两个小时加几个小细节，性价比极高。

第一个是回到顶部按钮。页面滚动超过一定距离后，右下角浮现一个“回到顶部”按钮，点击后平滑回到顶部。代码很简单：

javascript复制const backTop = document.getElementById('backTop');
window.addEventListener('scroll', function () {
  backTop.style.display = window.scrollY > 300 ? 'block' : 'none';
});
backTop.addEventListener('click', function () {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

第二个是搜索框过滤。虽然没做后端，但可以对前端数组做模糊匹配：用户在搜索框输入关键词，列表页只显示名称中包含关键词的商品。一行 filter 就能实现：

javascript复制function getSearchResult(keyword) {
  return products.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase()));
}

第三个是页面顶部导航的滚动置顶和阴影。用 position: sticky 把导航钉在顶部，滚动时加一点阴影，视觉层次感立刻不一样。

第四个是加载动画。给商品图片加一个 loading="lazy" 属性，或者给页面加一个简单的淡入动画，观感会好很多。加CSS动画并不复杂：

css复制.card {
  animation: fadeInUp 0.5s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

这些细节加起来，页面质感会完全不一样。期末大作业的评分标准里，“完成度”和“精致度”通常是重要维度，细节多的人更容易拿到高分。

最后再分享一个我的实际体会。很多同学做期末项目，喜欢把时间花在“找一份好看的模板”上，改改名字就想交差。但真正到答辩现场，老师一问“这个功能怎么实现的”，模板站的代码自己根本答不上来，反而露怯。

自己做一遍虽然累，但过程中踩过的每一个坑——JSON.parse 报错、flex挤压变形、路径加载不到——都会成为你讲项目时最真实的素材。我常说，期末大作业不只是交一个网页，它是一次“把零散知识点组装成完整作品”的训练。这套HTML+CSS+JavaScript商城做完，你对前端三件套的理解，会比看十篇教程都扎实。做完之后，记得自己把每个模块的功能在浏览器里点一遍，尤其是那种“老师会当场问”的交互点。