HTML+CSS+JavaScript购物商城期末大作业完整实现教程-AI智能范式网

又到了期末交大作业的时候。每年这时候都有学弟学妹拿着“HTML+CSS+JavaScript购物商城”这个题目来找我，说代码写了一半卡住了，或者不知道从哪下手。这个题目确实是大学生HTML期末大作业里的经典款：它不要求后端、不依赖框架，纯靠前端三件套就能做出一整块内容饱满的页面，又能把一门课里学过的知识点几乎全部覆盖进去。今天我就拿一个实际做过的“相宜本草购物商城”页面，把从HTML骨架到CSS布局再到JavaScript交互的完整实现过程拆开讲一遍，顺带把我在这个项目里踩过的坑和修正方案一起整理出来。不管你是刚学完语法还不知道怎么串起来的新手，还是想要个高分作业参考模板的同学，这篇都能给你一条可以直接走通的路。

1. 项目整体设计与思路拆解

1.1 为什么购物商城适合做期末大作业

期末网页设计作业最怕的两件事，一是页面太简单交上去显得敷衍，二是功能太复杂自己根本写不完。购物商城恰好卡在两者中间，是一个性价比极高的选题。

先说覆盖面。一个标准商城页至少要有顶部导航、搜索区、Banner轮播、商品展示列表、购物车交互、底部信息这几大块。写HTML时能练到语义化标签和块级元素的嵌套规划；写CSS时能练到Flex布局、Grid布局、内外边距、颜色字体、悬浮动画；写JavaScript时能练到事件监听、数组遍历、DOM操作、定时器这些高频考点。一门《Web前端开发基础》课的大纲，基本就被这个题目串起来了。

再说展示效果。评分老师打开你交的页面，第一眼看的不是代码写得有多优雅，而是页面完整度和视觉完成度。商城的结构天然就是“满”的，有图有字有按钮有交互，视觉效果容易出彩。拿到八十分以上的概率，比做一个只有几个段落和一张图的静态展示页要高出一大截。

最后说难度控制。淘宝京东那种体量的商城肯定做不了，但“一个大作业级别的商城”完全在可控范围内。核心思路就一句话：用单页面承载多模块，用三个文件做到结构与表现与行为分离。这个思路也符合实际开发的基本规范，不会把你带偏。

1.2 页面模块规划与文件组织方式

动手写代码之前，我建议先花20分钟做规划，这一步比你想象中重要得多。期末作业最容易翻车的地方不是代码写不出来，而是写到一半发现结构混乱，加个功能就要大改，最后赶在截止前一晚疯狂返工。

我的做法是在纸上先把页面从上到下拆成模块列表：

顶部导航栏：品牌Logo + 菜单项 + 登录注册入口
搜索区：输入框 + 搜索按钮，支持按商品名过滤
Banner轮播区：三张左右的主题宣传图，自动切换
商品列表区：核心模块，放六到八个产品卡片，每个卡片包含图片、名称、价格、加入购物车按钮
购物车侧边栏：点击按钮后滑出的面板，展示已加商品列表和合计金额
返回顶部按钮：固定在页面右下角，滚动后显示
底部信息区：版权声明、联系方式、备案信息占位等

文件组织按照前端规范分三个文件，或者为了提交方便做成三个文件加一个文件夹：

text复制xiangyi-shop/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── banner1.jpg
    ├── banner2.jpg
    ├── banner3.jpg
    ├── product1.jpg
    └── ...

html文件负责页面结构，css文件夹负责所有样式，js文件夹负责全部交互。这样拆分的好处有两个：一是代码脉络清楚，哪里出问题直接锁定对应文件；二是在老师问到“三者为什要分离”时你能答得上来，这本身就是个加分点。

1.3 技术选型背后的考量

有些同学会问，现在前端不是都用Vue、React吗，为什么期末大作业还要用原生三件套？这个问题我自己当年也纠结过。道理其实很简单：期末大作业考查的是基础掌握程度，而不是框架调用能力。用Vue脚手架搭一个商城，你确实能交差，但老师提问时你大概率讲不清楚里面的数据流动和DOM更新原理；用原生HTML+CSS+JavaScript手写，每一个交互逻辑都是你自己实现出来的，这中间的收获是框架给不了的。

另外要强调一点，不要在这个阶段引入CSS预处理器、前端构建工具这些东西。大作业环境的设备不统一，有的电脑上可能连Node都没装。纯三件套打开即运行，双击index.html就能演示，这个“最笨”的方案反而最稳定、最不容易在演示现场翻车。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 页面骨架搭建：HTML结构设计与语义化

2.1 基础结构与meta标签的细节

很多同学写HTML是用编辑器自动生成的模板，自己压根没看过头部信息，这其实是个隐患。评审老师如果抽查代码，第一眼看的就是<head>区域的规范度。基础结构的写法如下：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相宜本草官方商城 - 天然草本护肤</title>
    <link rel="stylesheet" href="css/style.css">
</head>

三个细节值得注意。第一，lang="zh-cn"声明页面语言是简体中文，这有助于浏览器正确解析文字编码和辅助技术的识别。第二，charset="utf-8"必须写，不写的话在某些系统上用记事本打开中文会乱码。第三，viewport是移动端适配的关键，如果你的页面要在手机上演示，这行是必不可少的。

还有一个小规范问题：<link>标签放CSS放在<head>里，<script>标签放JavaScript放在<body>的末尾（即</body>之前）。原因是HTML是自上而下解析的，CSS先加载能给页面提前确定样式，防止“闪烁的裸HTML”；而JS如果放在头部，它会阻塞后续DOM解析，万一脚本里操作了还没渲染出来的元素，就会直接报null错误。把JS放底部是最稳妥的做法，零基础也能理解。

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

2.2 头部导航与Logo区的结构设计

导航栏的结构我推荐用header加nav，内部用ul无序列表来承载菜单项，这比一排div更符合语义化标准，也是课程评分时常见的一个得分点。

html复制<header class="header">
    <div class="header-inner">
        <div class="logo">
            <a href="#">相宜本草</a>
        </div>
        <nav class="nav-menu">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#products">明星产品</a></li>
                <li><a href="#about">品牌故事</a></li>
                <li><a href="#" id="cart-btn">购物车(<span id="cart-count">0</span>)</a></li>
            </ul>
        </nav>
        <div class="user-area">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </div>
</header>

这里的header-inner是一个经典的居中容器，后面CSS里会给它设置最大宽度和水平居中，让内容在大屏幕上不会贴边。Logo区域暂时用文字替代图片，如果你有品牌Logo图也可以换成<img>标签，但要记得设置合适的宽度，别让图片把导航高度撑爆。菜单里我预留了“购物车”入口，后面JavaScript会动态更新cart-count这个数字，这算是前后端联动的雏形结构。

这里有一个大多数同学容易忽略的点：导航里用了锚点链接href="#products"。这样做的好处是点击菜单会自动滚动到对应模块，不写任何JavaScript就能实现页面内定位。在展示时，这个简单的细节非常加分，因为很多同学做出来的商城点菜单没有任何反应。

2.3 主体三大模块：轮播图、商品列表、购物车侧边栏

主体区是作业的核心。轮播图模块我直接命名为section，加上id方便锚点跳转：

html复制<section class="banner" id="home">
    <div class="banner-wrapper">
        <div class="banner-slides">
            <div class="slide active">
                <img src="images/banner1.jpg" alt="草本护肤节">
            </div>
            <div class="slide">
                <img src="images/banner2.jpg" alt="明星单品推荐">
            </div>
            <div class="slide">
                <img src="images/banner3.jpg" alt="新品上市">
            </div>
        </div>
        <button class="banner-prev">&#10094;</button>
        <button class="banner-next">&#10095;</button>
        <div class="banner-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>
</section>

轮播图的HTML结构有个关键点：所有slide都在同一个容器里横向排列，而不是一列一列堆叠。CSS里我会把.banner-slides设置成display: flex，每次切换时改变整个容器的transform: translateX()，这种方案比控制每个slide的显示隐藏更顺滑，也是主流轮播图的做法。

商品列表区我建议用一个Grid布局容器来装八个商品卡片。每个卡片是一个article元素，文章的意思——在语义化里，独立的内容块用article是合理的，比满屏的div规范得多。

商品卡片的结构统一如下：

html复制<article class="product-card" data-name="红景天焕亮精华液" data-price="129">
    <div class="product-img">
        <img src="images/product1.jpg" alt="红景天焕亮精华液">
        <span class="product-tag">热卖</span>
    </div>
    <h4 class="product-name">红景天焕亮精华液</h4>
    <p class="product-desc">改善暗沉，提亮肤色</p>
    <div class="product-bottom">
        <span class="product-price">¥129</span>
        <button class="add-cart-btn">加入购物车</button>
    </div>
</article>

注意我在article上放了data-name和data-price两个自定义属性。这是给后面JavaScript用的“数据接口”：点击按钮时可以直接从当前卡片的dataset里读取商品名和价格，不需要额外维护一份数据数组，代码简洁很多。这个技巧来自实际开发中的data自定义属性，期末作业里用上会让代码层次感提升不少。

购物车侧边栏放在主体区的末尾，用一个固定定位的面板实现，初始状态是隐藏的。它的结构包括遮罩层和侧边栏本体：

html复制<div class="cart-overlay" id="cart-overlay"></div>
<aside class="cart-sidebar" id="cart-sidebar">
    <div class="cart-header">
        <h3>我的购物车</h3>
        <button class="cart-close" id="cart-close">&times;</button>
    </div>
    <ul class="cart-list" id="cart-list">
        <!-- 动态生成 -->
    </ul>
    <div class="cart-footer">
        <span>合计：</span>
        <strong id="cart-total">¥0.00</strong>
        <button class="checkout-btn">去结算</button>
    </div>
</aside>

购物车列表项不用写在HTML里，而是交给JavaScript根据用户点击动态创建li，这样代码量少、逻辑清晰，也符合“数据是动态的”这个前端核心理念。

2.4 底部信息与细节填充

底部信息区结构比较固定：

html复制<footer class="footer" id="about">
    <div class="footer-inner">
        <p>相宜本草官方商城课程设计演示页面</p>
        <p>&copy; 2024 本页面仅用于前端课程学习交流</p>
        <p>地址：某某大学信息工程学院 &nbsp; 联系方式：123456789</p>
    </div>
</footer>

这里有个提醒：如果页面会公开提交或演示，底部不要写真实个人信息，用课程名称和“演示”字样占位就行。有些同学习惯把自己真实手机号写上去，万一页面被公开抓取，手机号就有泄露风险。还有©这个字符实体，能正确显示版权符号©，这个小细节也能体现HTML功底。

3. 页面“颜值”落地：CSS布局、配色与动画细节

3.1 从零开始的全局样式设置

样式文件我习惯从全局设置写起，先定义通配选择器和基础样式。教科书里常写* { margin: 0; padding: 0; }，这个写法的优点是简单粗暴，一分钟就能把所有浏览器默认间距干掉；缺点是*选择器会匹配页面里每一个元素，对性能有一定折损，而且把表单元素的默认样式也清掉了，后面还得重新补。

我的做法是折中一下，在Css里既利用*的便利性，又补上针对性的重置；

css复制* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background-color: #f8f6f2;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

这里box-sizing: border-box很关键。默认情况下，元素的实际宽度是width加padding再加border算出来的，所以设置宽度为100%再加内边距就会溢出父容器。改成border-box之后，padding和border都算在width里面，布局心理负担小很多。这也是现代开发里公认的“更符合直觉”的盒模型设置。

然后定义一些全局颜色变量，方便统一品牌风格：

css复制:root {
    --primary-green: #2d6a4f;
    --accent-red: #c0392b;
    --bg-light: #f8f6f2;
    --text-dark: #2b2b2b;
    --text-gray: #777;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
}

用CSS自定义属性（变量）的好处是，后面调整色系只需要改这几行的值，全站颜色会一次性同步变动。这对期末作业来说特别实用，比如老师反馈说“绿色太深了”，你改一行就完事，不用全局搜索替换。

3.2 布局方案：Flex与Grid怎么选

页面布局是整个CSS里最核心的技能点，也是很多同学最迷惑的地方。我给一个最简判断标准：一维布局用Flex，二维布局用Grid。

导航栏是典型的一维布局，所有菜单项在一条线上排列，用Flex最合适：

css复制.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header {
    background-color: #fff;
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

这里要单独说一下position: sticky。它让导航栏在滚动时“吸”在页面顶部，用户体验很直观，而且不需要JavaScript参与，非常有“功能感”。期末演示时你上下滚动页面，导航栏牢牢钉在顶部，老师会多看一眼。

margin: 0 auto配合max-width: 1200px是块级元素水平居中的经典组合，这个一定要掌握，后面所有大的内容容器都会用到。

商品列表是典型的二维布局，多个卡片需要排成多行多列，用Grid：

css复制.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

repeat(4, 1fr)的意思是平均分成四列，每列等宽。gap设置卡片间距。这套代码往下再配一个媒体查询，屏幕宽度降到768px以下时改成两列，就能实现基础响应式。一个页面里同时用上Flex和Grid两种布局技术，CSS的覆盖面就显得很完整。

3.3 居中问题的完整解法

居中看起来是个小事，但在我接触过的作业里，问得最多的反而是它。我把常用场景和对应方案整理成一张表，你们遇到问题对着查就行：

场景	推荐写法	说明
块级元素水平居中	`margin: 0 auto`	元素必须有明确宽度或max-width
文字水平居中	`text-align: center`	作用在父容器上
Flex容器内水平垂直居中	`display: flex; align-items: center; justify-content: center`	最常用，万能
Grid容器内居中	`place-items: center`	适用于Grid或Flex
定位元素水平居中	`left: 50%; transform: translateX(-50%)`	配合`position: absolute`或`fixed`

特别提醒一个初学常见误区：给span或a这样的行内元素设置margin: auto是没有效果的，行内元素只会在水平方向自然排列，必须先把display改成block或者inline-block才能用margin定位。另外一个坑是垂直居中，用line-height等于容器高度可以把单行文本垂直居中，但如果是多行文本或者图片，这个方法就会失效，改用Flex更保险。

3.4 配色与字体：贴合护肤品调性的视觉处理

相宜本草这个品牌的调性偏向“草本”“自然”“温和”，所以整个页面的配色我用了绿色系作为主色，搭配浅米色作为背景，红色作为促销标签的点缀色。这套色彩方案的逻辑是：主色建立品牌识别，背景色烘托氛围，强调色引导用户注意力。

css复制.section-title {
    text-align: center;
    font-size: 28px;
    color: var(--text-dark);
    margin: 40px 0 10px;
}

.section-title span {
    color: var(--primary-green);
}

商品卡片的价格区域也有细节。价格数字我会单独用一个较醒目的字号，并加上强调色；原价用删除线显示，形成“划线价+现价”的心理暗示。

字体方面，全局用系统字体栈即可。如果想在标题上加点视觉效果，可以用CSS渐变：

css复制.brand-tagline {
    background: linear-gradient(90deg, #2d6a4f, #588b6e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 22px;
    font-weight: bold;
}

这个“渐变文字”技巧当年可是让不少同学惊呼“还能这样”。需要兼容性说明的是-webkit-background-clip是针对WebKit内核浏览器的前缀，桌面端的Chrome和Edge都能正常显示。期末作业环境主流是Chrome，放心用。

3.5 商品卡片的悬浮动画与细节效果

商品卡片是页面里最容易被“做活”的地方。我的做法是给每个卡片加一个悬浮上浮效果和阴影变化：

css复制.product-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

transition有两个参数，第一个是属性名，第二个是时长和缓动函数。这里设置成0.3秒加ease，动画既不突兀也不会拖沓。CSS里还有几个可以做文章的点：商品的“热卖”标签用红色小方块盖在图片左上角，可以用绝对定位；卡片内部的图片hover时可以稍微放大，造成“目光聚焦”的效果：

css复制.product-img {
    position: relative;
    overflow: hidden;
}

.product-img img {
    transition: transform 0.5s ease;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

还有热词里提到的“涟漪光圈扩散”效果，如果你想让Banner的按钮更有设计感，可以给按钮加一个::after伪元素做扩散动画：

css复制.btn-animate {
    position: relative;
    overflow: hidden;
}

.btn-animate::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    transition: transform 0.5s ease;
}

.btn-animate:hover::after {
    transform: scale(8);
}

这个效果是鼠标悬停时从按钮内部扩散出一圈光圈，实际运行起来视觉效果很讨喜。如果你觉得配色和品牌不太统一，可以换成半透明白或者半透明白绿色。

轮播图区域的样式核心是让.banner-slides变成一个横向的宽容器，并且通过transform来平移：

css复制.banner-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
}

.banner-slides {
    display: flex;
    transition: transform 0.6s ease;
}

.slide {
    min-width: 100%;
}

.banner-prev,
.banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.6);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

几个容易出问题的点：.slide必须设置min-width: 100%，否则flex容器里的子元素会按内容自动收缩或伸展，可能导致图片排列异常。.banner-prev和.banner-next两个按钮定位到左右两侧时，transform: translateY(-50%)是为了在垂直方向让按钮基于自身高度居中。按钮要设置z-index: 10左右，确保它们盖在图片上方。

4. 交互灵魂：JavaScript功能实现与优化

4.1 核心语法回顾：变量、函数、数组与对象

很多同学的痛点是语法都学过，但不知道在项目中怎么组织起来。JavaScript项目里最常见的组合就是把数据放进数组对象，然后用函数和循环去处理。

以商城项目为例子，商品数据可以抽象成对象数组：

javascript复制const products = [
    {
        id: 1,
        name: "红景天焕亮精华液",
        price: 129,
        tag: "热卖",
        img: "images/product1.jpg"
    },
    {
        id: 2,
        name: "四倍蚕丝保湿面膜",
        price: 79,
        tag: "人气",
        img: "images/product2.jpg"
    }
];

这种数据结构的好处是：数据和页面分离，后面做搜索、渲染、统计金额都是对这个数组进行“加工”，逻辑清清楚楚。期末作业里就算商品是写死在HTML里的，你也在JavaScript里维护一份数据副本，这样“数据处理”的分数才算是拿到手了。

函数的使用上，我强烈建议把一个功能封装成一个独立函数，比如renderProducts(products)负责渲染商品列表，addToCart(id)负责加入购物车，updateCartUI()负责刷新购物车显示。这样代码可读性好，出bug时顺着函数名就能找到问题所在。

4.2 商品列表的动态渲染：数组与DOM操作

虽然商品卡片可以直接写在HTML里，但作为前端项目，我更推荐用JavaScript动态生成，这也是热词里“商品详情”“html js css商品详情”指向的核心需求。动态渲染的好处是后续做搜索功能时改了数据源，页面能自动更新。

javascript复制const grid = document.querySelector('.product-grid');

function renderProducts(productList) {
    grid.innerHTML = '';
    productList.forEach(item => {
        const card = document.createElement('article');
        card.className = 'product-card';
        card.dataset.name = item.name;
        card.dataset.price = item.price;
        card.innerHTML = `
            <div class="product-img">
                <img src="${item.img}" alt="${item.name}">
                <span class="product-tag">${item.tag}</span>
            </div>
            <h4 class="product-name">${item.name}</h4>
            <p class="product-desc">${item.desc}</p>
            <div class="product-bottom">
                <span class="product-price">¥${item.price}</span>
                <button class="add-cart-btn">加入购物车</button>
            </div>
        `;
        grid.appendChild(card);
    });
}

renderProducts(products);

注意这里用了模板字符串（反引号），这是ES6语法，可以很方便地把变量拼进HTML字符串里。也许有同学在作业中会多个空格或多调试几次watches,模板字符串比老式字符串加号拼接要清爽得多。

动态渲染的核心逻辑就两个步骤：先innerHTML = ''清空容器，再用forEach循环创建新卡片。清空那一步不能省，否则重复调用会一直追加内容。你可以在浏览器控制台执行renderProducts(products)两次，看看会发生什么，实践一次就理解了。

4.3 搜索过滤功能：filter方法的应用

搜索功能是购物商城的标配，实现方案用的是数组的filter方法。思路是：监听搜索框的输入事件，把当前输入的关键字和商品名做匹配，匹配到的商品重新渲染。

javascript复制const searchInput = document.querySelector('#search-input');
const searchBtn = document.querySelector('#search-btn');

function filterProducts(keyword) {
    return products.filter(item =>
        item.name.includes(keyword.trim())
    );
}

searchBtn.addEventListener('click', function () {
    const keyword = searchInput.value;
    const result = filterProducts(keyword);
    if (result.length > 0) {
        renderProducts(result);
    } else {
        grid.innerHTML = '<p class="no-result">没有找到相关商品，换个关键词试试吧。</p>';
    }
});

searchInput.addEventListener('input', function () {
    if (this.value.trim() === '') {
        renderProducts(products);
    }
});

filter的用法很直观：它接收一个箭头函数，函数里返回布尔值，为true的元素会被保留，最后得到一个新数组。includes方法是判断字符串里是否包含关键字的工具。两个ES6方法配合起来，十几行代码就把搜索做完了。这里有个体验细节：搜索框内容被清空时自动恢复完整列表，不然老师演示完搜索，页面就停留在残缺状态，很尴尬。

4.4 点击事件与事件委托

商品列表里有很多“加入购物车”按钮，如果给每个按钮单独绑定事件，代码会显得冗长而且性能欠佳。更好的方案是事件委托：把事件绑定在父容器上，通过判断点击的目标是不是按钮来执行逻辑。

javascript复制grid.addEventListener('click', function (event) {
    const target = event.target;
    if (target.classList.contains('add-cart-btn')) {
        const card = target.closest('.product-card');
        const name = card.dataset.name;
        const price = parseFloat(card.dataset.price);
        addToCart(name, price);
    }
});

event.target是实际被点击的元素。用closest('.product-card')可以从按钮往上找到所在的整个商品卡片。这里直接读取了我在HTML里写的data-name和data-price，体现了数据和页面结构呼应。项目里用的addEventListener是标准事件绑定方式，不推荐直接在HTML标签里写onclick="addToCart()",因为那样会导致代码耦合，后期维护很麻烦。

4.5 购物车逻辑：存储、渲染与金额计算

购物车本质上是维护一个数组，里面存着用户加过的商品。设计的时候考虑到同一件商品可能加多次，我用“商品名作为唯一标识”来合并同类项，重复添加只在数量上+1：

javascript复制let cartItems = [];

function addToCart(name, price) {
    const existing = cartItems.find(item => item.name === name);
    if (existing) {
        existing.count += 1;
    } else {
        cartItems.push({ name: name, price: price, count: 1 });
    }
    updateCartUI();
}

find是数组方法，作用是找到第一个满足条件的元素。这个合并逻辑对界面展示很友好，用户不会看到两行完全相同的商品。

购物车列表的渲染用map生成HTML字符串再一次性设置到ul里，这里提醒一个很容易踩的坑：如果购物车空了，要显示“购物车还是空的”之类的占位文本；否则界面出现一个空的边框，看起来像没加载完。

合计金额的计算用reduce最简洁：

javascript复制const total = cartItems.reduce((sum, item) => sum + item.price * item.count, 0);

reduce方法会遍历数组的每个元素，把上一次循环的结果sum和当前值item.price做累加。初学阶段看到reduce可能会觉得抽象，它其实就是在做“把一堆数加起来”这件事。求和之后用toFixed(2)保留两位小数，就可以避免出现¥123.999999这种浮点数精度问题。

4.6 轮播图实现：定时器与transform切换

轮播图的JavaScript逻辑并不复杂，核心就一个变量currentIndex，每次切换时把.banner-slides的transform设置为translateX(-currentIndex * 100%)：

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

function goToSlide(index) {
    currentIndex = index;
    slides.style.transform = `translateX(-${currentIndex * 100}%)`;
    updateDots();
}

function nextSlide() {
    const nextIndex = (currentIndex + 1) % totalSlides;
    goToSlide(nextIndex);
}

function prevSlide() {
    const prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
    goToSlide(prevIndex);
}

function startAutoPlay() {
    timer = setInterval(nextSlide, 3000);
}

function stopAutoPlay() {
    clearInterval(timer);
}

这里的%取模运算是轮播图的核心技巧。(currentIndex + 1) % totalSlides在索引到达最后一张时会自动回到0；(currentIndex - 1 + totalSlides) % totalSlides处理了从第一张往前跳到最后一张的边界情况。如果没有这行，点“上一张”在第一张时会报负数，translateX会跑到奇怪的位置。

给轮播图容器绑定mouseenter和mouseleave事件，悬停时停止自动播放，离开时恢复，这是提升用户体验的标准做法。另外需要初始化一次goToSlide(0)，确保dots状态和初始切面一致。

4.7 返回顶部与彩蛋扩展

返回顶部按钮的固定定位部分写在CSS里：

css复制.back-top {
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--primary-green);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 99;
}

JavaScript部分监听页面滚动，超过一屏的高度就显示按钮，点击后平滑滚回顶部：

javascript复制const backTopBtn = document.querySelector('.back-top');

window.addEventListener('scroll', function () {
    if (window.scrollY > 400) {
        backTopBtn.style.display = 'block';
    } else {
        backTopBtn.style.display = 'none';
    }
});

backTopBtn.addEventListener('click', function () {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

这里用的是window.scrollTo加behavior: 'smooth'参数，浏览器会自动做平滑滚动动画，不需要自己写requestAnimationFrame帧动画。现在看到这个写法比当年用setInterval一点点移动页面的老式算法省心很多，兼容性也够好。

如果你还想加点有视觉冲击力的东西，可以做一个全屏视频背景模块：在页面里放一个<video>标签，用JS控制它的旋转或者模拟播放结束。比如热搜词里出现过v.style.rotate = '-90deg'和document.querySelector('video').dispatchEvent(new Event('ended'))这些操作，它们演示的是DOMStyle的rotate属性以及手动派发事件。期末作业里用视频做横幅确实很抓眼球，但要注意视频文件体积别太大，否则页面加载会很卡。

5. 常见问题排查与避坑实录

5.1 CSS样式不生效，问题出在哪

样式不生效是所有初学者遇到的第一个大坑，排查思路有一个固定流程：

第一个检查路径。查看HTML里<link>标签的href路径是否和实际文件位置匹配。如果你的HTML在项目根目录，CSS在css文件夹里的style.css，那么href就是css/style.css。如果写成style.css，浏览器会在根目录找，找不到样式自然全部失效。最简单的验证方法：打开浏览器按F12进入开发者工具，切到Sources（源代码）面板看css文件是否被加载，或者Network面板看有没有404错误。

第二个检查权重。如果你写了.product-name { color: red; }没生效，很可能是其他地方有个权重更高的选择器覆盖了它。CSS的优先级规则是：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器。查样式时直接在开发者工具的Elements面板右侧看Styles面板，它能显示所有命中该元素的样式及优先级，被划掉的就是被覆盖的规则。

第三个检查缓存。修改了CSS但页面没有任何变化，可能是浏览器缓存了旧的CSS文件。按Ctrl + F5强制刷新，或者打开开发者工具勾选Network面板里的Disable cache选项。

5.2 JavaScript报错后的排查顺序

JavaScript最烦人的地方是报错信息有时让人摸不着头脑。我的顺口溜是“先看控制台，再查大小写，最后查空值”。

浏览器按F12打开Console面板，红色报错会直接告诉你哪一行出了问题。最常见的几类错误：

Cannot read property 'addEventListener' of null：说明你获取的这个元素是null，原因通常是JS在HTML之前执行了，元素还不存在。解决方法是把<script>放到</body>之前，或者包一层DOMContentLoaded事件。
xxx is not defined：某个变量或函数没定义。检查函数名有没有拼错，或者有没有把函数写在别的文件里忘了引入。
Unexpected token：语法错误，通常是少了括号、花括号或引号，去报错行附近找一找。

有一个排查技巧很实用：在关键逻辑里加console.log()打印中间变量。比如搜索功能没反应，就在input事件里先打印用户输入的值，再打印过滤后的数组。看到数据是正常的，就知道问题出在渲染环节，而不是数据处理环节。

5.3 居中失败、布局跑偏的常见元凶

页面布局跑偏的常见元凶不外乎三种。

第一种是盒模型没设好。两个元素明明宽度之和是100%，但换行或者溢出了。检查父容器和子元素有没有加box-sizing: border-box，这能解决大半的宽度计算困惑。

第二种是浮动没清除。你用了float: left实现卡片排列，但父容器高度塌陷成0，背景色和边框都显示不出来。虽然现在主流布局用Flex和Grid，但如果你的代码用了float，记得在父容器上加overflow: hidden或者clearfix。

第三种是多个元素之间出现多余的空隙。比如ul列表里的li是行内块元素，HTML代码换行符会被解析成一个空格，导致两列之间有一条缝。解法是把父元素的font-size设置成0，再在子元素上单独设置字体大小；或者干脆放弃行内块，统一用Flex。

5.4 期末作业防翻车清单

最后给一份我在提交作业前会过一遍的检查清单，照着勾一遍，能避免大部分低分翻车：

页面在Chrome和Edge里都打开测试过，显示一致
所有图片有alt属性，点击图片不会出现裂图
中文没有乱码，页面开头声明了charset="utf-8"
导航栏的所有链接都能跳转或滚动到对应模块
搜索功能有空状态提示，不会一片空白
购物车为空时有提示文本
返回顶部按钮出现和隐藏的逻辑正常
滚动时导航栏固定在顶部，内容不会被遮挡
文件命名规范，没有中文名和空格
代码缩进整齐，关键地方有注释

注释这一点再多说一句。期末作业代码里写注释，会让老师一眼看出你对每个模块的理解。每个功能函数上方写一行“这个函数做了什么”，比任何华丽的设计都更能体现你的学习态度。

5.5 演示答辩时的讲稿思路

很多学校除了交代码还要现场或录视频演示，这块同样可以提前准备。不要上来就逐行念代码，而是按“结构—表现—行为”三层逻辑来讲：先点开HTML文件说页面结构分成哪几个模块，再切换到CSS说配色和布局选择的理由，最后演示JS交互，每操作一个功能就说一句对应的代码实现方式。

如果老师问“页面为什么用绿色系”，你回答“相宜本草是草本护肤品牌，绿色符合品牌调性”，这个回答既体现设计意识又展示调研能力。如果问“购物车里数字怎么更新的”，你就说“每次点击加入购物车，都会更新cartItems数组，再调用updateCartUI函数重新渲染”，一句话讲清楚数据驱动视图的流程。这些问题的答案在写代码时就准备好了，不需要临场编。

个人体会是，期末大作业最大的收获不在于页面多炫，而在于你亲自动手把一个空的文件夹变成一辆结构完整的“小车”。中间会遇到报错、查资料、改方案的反复过程，这些才是真正让你长本事的部分。等你做完这个购物商城，再回头去看之前觉得云里雾里的语法知识点，会发现它们全都串起来了。

最后再给一个小技巧：代码写到一半如果乱了，不要急着推翻重来。先把文件复制一份，在原文件上大胆试验，改挂了就换回备份。实战里这种“分支保存”的习惯救了我很多次，你们也可以试试。这次的商城项目做完，建议再把它扩展成多页面版本，比如加一个商品详情页、一个结算页，这样整套前端技能的链路就完整了。

HTML+CSS+JavaScript购物商城期末大作业完整实现教程