电影购票网站

电影购票网站

项目简介

基于原生 HTML、CSS、JavaScript 实现的 PC 端电影在线购票演示网站。数据使用本地 Mock 模拟，订单与座位占用状态通过浏览器 localStorage 持久化，无需后端服务，直接用浏览器打开 index.html 即可运行。

---

功能说明

1. 首页（正在热映）

• 以卡片网格展示全部热映电影，包含海报、片名、导演、年份。
• 点击电影卡片进入该片的详情页。

2. 电影详情

• 展示海报、导演、年份、类型、剧情简介。
• 列出该片可选场次（时间、影厅、票价）。
• 点击场次高亮选中，未选场次时提示错误。
• 确认场次后进入选座页。

3. 在线选座

• 7 排 × 8 座（A1–G8）可视化座位图，顶部标示荧幕方向。
• 座位状态：
  • 灰色：可选
  • 绿色：当前已选
  • 红色：已被预订（不可选）
• 支持多选/取消，实时显示已选座位与总价。
• 不同场次的已占座位独立管理。

4. 确认订单

• 汇总电影名称、场次、座位、总价。
• 支持返回选座页修改。
• 点击「确认支付并下单」生成订单并跳转「我的订单」。

5. 我的订单

• 列表展示历史订单：片名、场次、座位、总价、订单号、下单时间。
• 支持进入订单详情页查看完整信息。
• 无订单时显示空状态提示。

6. 订单详情

• 展示订单号、电影、场次、座位、下单时间、总价。
• 可返回订单列表。

7. 数据持久化

存储键	说明
userOrders	用户下单记录
bookedSeatsByShowtime	各场次已预订座位（按 showtimeId 区分）

刷新页面后订单与座位占用状态仍保留；清除浏览器本地数据后会恢复为 Mock 初始状态。

8. 其他特性

• 顶部导航可在「首页」「我的订单」间切换。
• 单页多视图，通过显示/隐藏区块实现页面流转。
• 基础响应式布局，适配较窄屏幕。

---

技术栈

• HTML5：页面结构与各功能区块
• CSS3：布局、卡片、座位图、响应式样式
• JavaScript（ES6+）：页面切换、渲染、选座与下单逻辑
• localStorage：本地数据持久化
• mockData.js：电影与场次模拟数据

---

文件及目录结构

homework-pc-movie-html/
├── index.html              # 主页面：HTML 结构、CSS 样式、业务脚本
├── mockData.js             # 模拟数据：电影列表、场次、初始已占座位
├── images/                 # 电影海报图片资源
│   ├── 沙丘2.jpg
│   ├── 哥斯拉大战金刚2：帝国崛起.jpg
│   ├── 蜘蛛侠：平行宇宙.jpg
│   ├── 流浪地球3.jpg
│   ├── 长津湖之水门桥.jpg
│   ├── 哪吒之魔童降世2.jpg
│   ├── 满江红.jpg
│   └── 雄狮少年.jpg
├── 演示材料/               # 演示相关附件
│   └── 演示视频.mp4
└── 项目说明.md             # 本说明文档

---

核心文件说明

index.html

单文件应用，包含：

• 样式：通用布局、首页卡片、详情页、选座图、订单页等样式
• 页面区块：home-page、detail-page、seat-selection-page、order-confirmation-page、my-orders-page、order-details-page
• 脚本：showPage 路由、render* 渲染函数、选座/下单、localStorage 读写

mockData.js

导出两个全局数组：

变量	内容
mockMovies	8 部电影（id、片名、导演、年份、类型、海报路径、简介）
mockShowtimes	8 个场次（关联 movieId、时间、影厅、票价、初始 bookedSeats）

修改此文件可增删电影、调整票价或初始占座情况。

---

使用方式

1. 用浏览器直接打开项目根目录下的 index.html。
2. 或使用本地静态服务器（如 VS Code Live Server）访问，避免部分环境下 file:// 协议的限制。

---

购票流程

首页浏览电影 → 电影详情 → 选择场次 → 选座 → 确认订单 → 支付下单 → 我的订单

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-pc-movie-html