粤东科技学院二手交易网
“粤东科技学院二手交易网”是我用原生前端实现的校园二手交易主题静态站，用来模拟校内二手电商的浏览、查看详情、加购结算等典型路径，并加入秒杀倒计时等氛围交互。
包含完整的源代码和素材文件
MISSION BRIEFING
前端课程实训，校园二手交易静态站
完成方式
Solo
单人项目，页面与交互全流程独立完成。
技术栈
Vanilla
HTML、CSS 以及原生 JavaScript，强调基础功与 DOM 事件驱动。
页面规模
6
从首页到个人中心的完整站点结构。
交互亮点
秒杀
倒计时并配合商品放大预览等电商常见微交互。
适配
响应式
兼顾不同尺寸屏幕的布局与可读性。
目标体验
像电商
尽量还原真实购物流程，让静态项目更“像产品”。
SCREEN TOUR
项目展示
点击图片可放大查看
页面列表
点击缩略图切换；点击右侧大图可放大查看
当前预览
点击图片可放大查看；放大后支持：滚轮缩放 · 拖拽平移 · ←/→ 切图 · Esc 关闭
首页展示 - 包含导航和最新商品展示
项目概述
“粤东科技学院二手交易网”是我独立完成的前端静态项目，我更想把校园里常见的二手交易需求，用更接近电商产品的页面结构与交互流程呈现出来。项目全程采用原生前端技术栈构建，它本身没有后端功能。我把站点拆成六个核心页面，包含首页、登录、注册、限时秒杀、购物车以及个人中心，用来静态展示一个校园二手交易平台在“逛商品 → 看详情 → 加购结算”链路上的界面设计与交互细节。
技术栈
CORE
核心技术
- HTML5
- CSS3
- JavaScript 原生
FEATURES
功能实现
- 文字滚动效果
- 轮播图展示
- 倒计时秒杀功能
- 表单验证
- 商品放大预览
- 响应式布局
开发过程
开发过程大致按需求分析、设计规划、前端开发以及测试优化这几步来推进。
- 1
需求分析
我先依据课程实训指导书把功能范围明确下来，并确定以“校园二手交易平台”作为项目主题，核心模块囊括首页展示、用户注册登录、商品展示、购物车管理以及个人中心等关键页面。
- 2
设计规划
在设计规划阶段，我参考小米商城与学校官网的页面信息层级与视觉取向，先把统一的色彩方案与交互风格定下来，并完成页面布局规划以及关键流程的路径设计。
- 3
前端开发
实现阶段我选用纯原生 HTML5 搭建页面结构，依靠 CSS3 来完成样式呈现，再用原生 JavaScript 去实现动态交互，比如首页轮播、文字滚动特效、限时秒杀倒计时、表单验证逻辑，以及商品放大预览等常见电商微交互。
- 4
测试优化
最后我对各页面的功能与兼容性做较全面的测试，针对发现的问题逐项修复与优化，确保整体交互更顺滑，并且在不同屏幕尺寸下也保持良好的可读性。
功能亮点
首页包含顶部导航以及轮播图展示，用来把主要入口和热门内容先呈现出来。
我做了文字滚动通知区域，并且把最新发布商品和猜你喜欢板块组合在一起，让页面更像真实电商。
限时秒杀区域带倒计时提醒，用来增强氛围感，也能提示用户抓住时机。
注册表单支持实时验证，校验项包含学号、手机、邮箱、姓名以及密码，减少提交后才报错的情况。
登录表单保持简洁，把关键路径做短，避免用户在输入上浪费时间。
商品展示部分提供分类导航，并且用多种布局来呈现不同类型的商品卡片。
价格会同时展示原价以及折扣价，用来模拟真实电商里常见的促销表达方式。
商品支持放大预览，并把详细参数展示出来，方便用户在静态页面里也能获得信息感。
秒杀区域配合倒计时，让用户一眼能看到剩余时间，强化活动氛围。
购物车页面提供商品列表和数量管理，并且会自动计算价格，方便用户理解当前花费。
结算流程也按电商常见步骤来组织，让用户能顺着路径把一次购买跑完。
个人中心会展示用户信息，并提供订单状态查看入口，用来补齐用户侧的常见页面结构。
交互演示，购物车核心
CART CORE
购物车核心交互，抽象演示
这个项目是静态前端，但我仍然把“数量、勾选以及合计”的关键链路做成可点可玩的逻辑演示，强化产品感。
可乐
已选中
¥3.50
¥7.00
薯片
已选中
¥5.00
¥5.00
牛奶
未选中
¥4.20
¥4.20
提示：只有“选中”的商品参与合计；数量可为 0（用于模拟删除前的边界情况）。