电影购票网站完整代码地址 https://www.aiyuanma.vip/posts/homework-pc-movie-html项目简介基于原生 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布局、卡片、座位图、响应式样式JavaScriptES6页面切换、渲染、选座与下单逻辑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导出两个全局数组变量内容mockMovies8 部电影id、片名、导演、年份、类型、海报路径、简介mockShowtimes8 个场次关联movieId、时间、影厅、票价、初始bookedSeats修改此文件可增删电影、调整票价或初始占座情况。使用方式用浏览器直接打开项目根目录下的index.html。或使用本地静态服务器如 VS Code Live Server访问避免部分环境下file://协议的限制。购票流程首页浏览电影 → 电影详情 → 选择场次 → 选座 → 确认订单 → 支付下单 → 我的订单