广科小卖部购物车
“广科小卖部购物车”是我在“网页设计”课程期末作业中独立完成的前端静态项目，用来模拟校园电商场景，并把购物车的关键交互也就是数量、勾选以及合计做成一条可解释、可复现的计算链路。
包含完整的源代码和素材文件
MISSION BRIEFING
网页设计期末作业，购物车核心交互
完成方式
Solo
单人完成，设计、交互与实现都由我负责。
技术栈
Vanilla
HTML、CSS 以及 JavaScript，主要使用 ES6 及以上语法，强调基础与事件驱动。
状态持久化
LocalStorage
刷新不丢数据，体验更接近真实应用。
交互重点
计算
数量变化、选中状态与总价统计保持一致性。
性能取向
轻量
优化 DOM 更新与事件处理，减少不必要的重排。
展示方式
可玩
本页提供“可点可玩”的逻辑演示，直观看到计算链路。
项目展示
点击图片可放大查看
交互演示，可点可玩
CART CORE
购物车交互演示
这不是完整电商，只是把购物车最核心的交互与计算逻辑做成可点可玩的展示。
可乐
已选中
¥3.50
¥7.00
薯片
已选中
¥5.00
¥5.00
牛奶
未选中
¥4.20
¥4.20
提示：只有“选中”的商品参与合计；数量可为 0（用于模拟删除前的边界情况）。
项目概述
“广科小卖部购物车”是我独立完成的前端静态项目，同时也是“网页设计”课程的期末作业。这个项目的重点不是页面堆得多，而是把购物车里最核心也最容易出错的交互逻辑做扎实。我把购物车管理、商品数量调整、勾选状态以及订单结算这条链路按状态驱动的方式组织起来，让每一次操作都能稳定地反映到 UI 与合计金额上。
并且按照老师的要求，项目全程采用原生技术栈来实现，从而把基础能力与交互细节更直接地体现出来。
技术栈
CORE
核心技术
- HTML5
- CSS3
- JavaScript，ES6 及以上语法
- 响应式设计
FEATURES
功能实现
- 商品数据模型
- 动态轮播图组件
- 购物车状态管理
- 本地存储也就是 LocalStorage
- 事件驱动的用户交互
- DOM 动态操作
开发过程
开发过程大致按分析、设计、开发、测试以及答辩这几步来推进。
- 1
需求分析
我先依据课程要求把项目的核心功能点梳理出来，明确购物车需要覆盖的基础能力，包括商品展示、购物车管理以及价格计算等关键模块。
- 2
设计阶段
在设计阶段，我把整体 UI 与色彩方案先定下来，并补齐 Logo 与轮播图素材，同时把页面布局与模块结构规划清楚，确保交互路径直观、信息层级清晰。视觉上我选用更简洁明快的风格，用来凸显“广科小卖部”的校园气质。
- 3
编码实现
鉴于课程要求不能使用框架，我选用原生 HTML5 来构建页面结构，借助 CSS3 去完成样式与响应式布局，再用 JavaScript 把交互逻辑落地。实现重点放在购物车核心链路上，我把商品展示、加入购物车、数量调整、价格计算、商品删除以及结算流程这些模块串在一起，确保它们在状态变化时能保持一致。
- 4
测试答辩
我对整套功能做了较全面的测试，并围绕易用性与细节体验做进一步打磨，确保关键交互链路能够稳定运行。最后通过现场演示与一对一答辩，把设计思路与技术实现讲清楚，并顺利完成课程验收。
功能亮点
- 精美的轮播图展示，通过JavaScript实现自动轮播功能
- 热销商品展示区，清晰呈现商品信息和价格
- 购物车商品列表管理
- 商品数量实时调整功能
- 单个商品总价实时计算
- 选中商品总数和总价动态统计
- 响应式布局，适配不同屏幕尺寸
- 一整套统一的色彩、样式设计
- 优化的DOM操作，提高页面渲染速度
- 高效的事件处理机制