电影票购票系统

最新推荐文章于 2024-05-27 21:10:20 发布
最新推荐文章于 2024-05-27 21:10:20 发布
阅读量1k 收藏 17
点赞数 2
分类专栏： JavaScript学习笔记 文章标签： css css3 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46293452/article/details/124898966
版权

电影票购票系统

HTML 部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影票购票系统</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="move-container">
			<label>请选一部电影</label>
			<select id="movie">
				<option value="30">你好，李焕英 ￥30</option>
				<option value="25">唐人街探案 ￥25</option>
				<option value="28">人潮汹涌 ￥28</option>
				<option value="32">刺杀小说家 ￥32</option>
			</select>
		</div>
		
		<ul class="showcase">
			<li>
				<div class="seat"></div>
				<small>可选</small>
			</li>
			<li>
				<div class="seat-selected"></div>
				<small>已选</small>
			</li>
			<li>
				<div class="seat-occupied"></div>
				<small>已售</small>
			</li>
		</ul>
		<div class="container">
			<div class="screen"></div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			
			<div class="row">
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
			</div>
			
			<div class="row">
				<div class="seat-occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			
			<div class="row">
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
			</div>
			
			<div class="row">
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
				<div class="seat-occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
		</div>
		<p class="text">您选择了<span id="count">0</span>个座位，一共￥<span id="total">0</span>元</p>
		<script src="script.js"></script>
	</body>
</html>

在这里插入图片描述

CSS 部分

* {
	box-sizing: border-box;
}

body {
	background-color: #242333;
	display: flex;
	flex-direction: column;
	color: #fff;
    align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.move-container {
	margin: 20px 0;
    margin-bottom: 20px;
}

.move-container select {
	background-color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 14px;
	padding: 5px 15px;
}

.seat {
	background-color: #444451;
	height: 12px;
	width: 15px;
	margin: 3px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.seat.selected {
	background-color: #63cad3;
}

.seat.occupied {
	background-color: #fff;
}

.row {
	display: flex;
}

在这里插入图片描述

设置过道

/* 设置过道 */
.seat:nth-of-type(2) {
	margin-right: 18px;
}

.seat:nth-last-of-type(2) {
	margin-right: 18px;
}

在这里插入图片描述

设置图案经过会有变化，鼠标滑动这些座位图案时，会有变化效果

/* 设置图案经过会有变化 */
.seat:not(.occupied):hover {
	cursor: pointer;
	transform: scale(1.2);
}

在这里插入图片描述

设置可选、已选、已售的图案不被移动有变化效果

/* 设置可选、已选、已售图案经过不会有变化 */
.showcase .seat:not(.occupied):hover {
	cursor: default;
	transform: scale(1);
}

在这里插入图片描述

设置可选、已选、已售效果

.showcase {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 5px 10px;
	border-radius: 5px;
	color: #777;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

.showcase li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
}

.showcase li small {
	margin-left: 2px;
}

在这里插入图片描述

设置白色屏幕

/* 设置白色屏幕 */
.screen {
	background-color: #fff;
	height: 70px;
	width: 100%;
	margin: 15px 0;
	transform: rotateX(-45deg);
	box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}

.container {
	perspective: 1000px;
}

在这里插入图片描述

设置文字

/* 设置文字 */
.text span {
	color: #6fea6f;
}

在这里插入图片描述

完整代码

* {
	box-sizing: border-box;
}

body {
	background-color: #242333;
	display: flex;
	flex-direction: column;
	color: #fff;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.move-container {
	margin: 20px 0;
	margin-bottom: 20px;
}

.move-container select {
	background-color: #fff;
	border: 0;
	border-radius: 5px;
	font-size: 14px;
	padding: 5px 15px;
}

.container {
	perspective: 1000px;
}

.seat {
	background-color: #444451;
	height: 12px;
	width: 15px;
	margin: 3px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.seat.selected {
	background-color: #63cad3;
}

.seat.occupied {
	background-color: #fff;
}

/* 设置过道 */
.seat:nth-of-type(2) {
	margin-right: 18px;
}

.seat:nth-last-of-type(2) {
	margin-right: 18px;
}

/* 设置图案经过会有变化 */
.seat:not(.occupied):hover {
	cursor: pointer;
	transform: scale(1.2);
}

/* 设置可选、已选、已售图案经过不会有变化 */
.showcase .seat:not(.occupied):hover {
	cursor: default;
	transform: scale(1);
}

/* 设置可选、已选、已售效果 */
.showcase {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 5px 10px;
	border-radius: 5px;
	color: #777;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

.showcase li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
}

.showcase li small {
	margin-left: 2px;
}

.row {
	display: flex;
}

/* 设置白色屏幕 */
.screen {
	background-color: #fff;
	height: 70px;
	width: 100%;
	margin: 15px 0;
	transform: rotateX(-45deg);
	box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}

/* 设置文字 */
.text span {
	color: #6fea6f;
}

JavaScript部分

获取 html 的信息

const container = document.querySelector('.container');// 获取座位信息
const seats = document.querySelector('.row .seat:not(.occupied)');// 获取座位已经出售的信息
const count = document.getElementById('count');// 获取选择座位的个数信息
const total = document.getElementById('total');// 获取选取座位的价格总和信息
const moviesSelect = document.getElementById('movie');// 获取电影信息

将票价的类型由 object 转化类型为 number

// const ticketPrice = moviesSelect.nodeValue;// 获取票价信息
// console.log(typeof ticketPrice);//类型是 object
// 转化类型为 number
const ticketPrice = +moviesSelect.value;
console.log(typeof ticketPrice);// number

点击页面的座位的任何位置都可以在控制台显示相关信息

// 给 container 加上事件，完善相应功能
container.addEventListener('click',(e)=>{
	console.log(e.target);// 
});

在这里插入图片描述

但是需要的只是座位信息，不需要点击屏幕也显示信息

container.addEventListener('click',(e)=>{
	if (e.target.classList.contains('seat')){
		console.log(e.target);
	}
});

在这里插入图片描述

还有的就是需要将已售的座位信息也去掉

container.addEventListener('click',(e)=>{	
	// 设置为可以点击没售出的座位，控制台显示信息
	if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){
		console.log(e.target);
	}
});

在这里插入图片描述

将选择的座位进行属性切换，属性的更换已在css样式中设置好了
在这里插入图片描述

container.addEventListener('click',(e)=>{
	if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){		
		e.target.classList.toggle('selected');
	}
});

在这里插入图片描述

将选择的座位统计起来

将选择的座位查看信息

// 更新已选座位数
function updateSelectedCount(){
	const selectedSeats = document.querySelectorAll('.row .seat.selected');
	console.log(selectedSeats);
}

container.addEventListener('click',(e)=>{
	// 设置为可以点击没售出的座位，控制台显示信息
	if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){
		e.target.classList.toggle('selected');
		updateSelectedCount();
	}
});

在这里插入图片描述

统计已选择的座位数

// 更新已选座位数
function updateSelectedCount(){
	const selectedSeats = document.querySelectorAll('.row .seat.selected');
	//console.log(selectedSeats);
    
    const selectedSeatsCount = selectedSeats.length;
	console.log(selectedSeatsCount);//统计已选择的座位数
}

container.addEventListener('click',(e)=>{
	// 设置为可以点击没售出的座位，控制台显示信息
	if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){
		e.target.classList.toggle('selected');
		updateSelectedCount();
	}
});

在这里插入图片描述

更新座位数和价格部分，根据选择的座位计算总价

// 更新已选座位数
function updateSelectedCount(){
    // 统计已选择的座位数部分
	const selectedSeats = document.querySelectorAll('.row .seat.selected');
	//console.log(selectedSeats);
    
    const selectedSeatsCount = selectedSeats.length;
	console.log(selectedSeatsCount);//统计已选择的座位数
    
    //更新座位数和价格部分
	count.innerText = selectedSeatsCount;
	total.innerText = selectedSeatsCount * ticketPrice;
}

container.addEventListener('click',(e)=>{
	// 设置为可以点击没售出的座位，控制台显示信息
	if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){
		e.target.classList.toggle('selected');
		updateSelectedCount();
	}
});

在这里插入图片描述

选电影事件

将之前的代码由 const 改为 let

//const ticketPrice = +moviesSelect.value;
let ticketPrice = +moviesSelect.value;

//选电影事件
moviesSelect.addEventListener('change',(e) => {
	ticketPrice = +e.target.value;
	// 调用函数 
	updateSelectedCount();
});

在这里插入图片描述

ich&du
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于Java+SpringBoot+Vue的影院购票，电影购票管理系统的设计与实现(源码+lw+部署文档+讲解等)
qq_51096760的博客
11-20 596
💗博主介绍：✌新人博主,工作经验两年+、专注于Java、小程序技术领域和毕业项目实战✌💗🌟文末获取源码+数据库🌟
ssm电影票订票系统毕业设计程序
07-31
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计...
在线电影购票系统
04-09
可以用于交大作业，功能不是很完整也不是很完善。不过界面还不错！
网上电影订票系统
07-22
（1） 系统概述：本系统通过管理员、注册用户的互动实现电影票的在线预订功能。管理员管理电影院的播放厅和电影场次；注册的用户可以浏览电影场次信息并在线预订电影票；匿名用户可以浏览和查询电影场次信息。 （2） 系统的角色：管理员、注册用户、匿名用户； （3） 管理员的功能：退出、管理播放厅、管理电影播放场次、查看电影播放场次对应的订票统计； （4） 注册用户的功能：退出、浏览和查询电影场次、预订电影票、退订电影票、结算预订电影票、浏览订票记录。 （5） 匿名用户的功能：浏览和查询电影播放场次、注册、登录、预订电影票。 （6） 实体1：用户=登录名+密码+用户角色+是否有效； （7） 实体2：电影播放场次=电影名+发行公司+导演+价格+演播厅+播放开始时间+播放结束时间； （8） 实体3：演播厅=演播厅名称+{演播厅座位}； （9） 实体4：电影票订单=订单号+用户名+电影场次+{电影票订单详情}+状态（预订、退订）； （10） 实体5：电影票订单详情=订单号 +演播厅座位+票面价格。
基于web电影院在线选座购票订票系统设计与实现
最新发布
杭州.黄老师
05-27 10000
基于web电影院在线选座购票订票系统设计与实现毕业设计源代码成品，黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSDN网站查询黄菊华老师。
基于springboot+vue的影院购票评价系统
weixin_72790115的博客
08-29 377
基于springboot+vue的影院购票评价系统
基于SSM的电影购票系统的设计与实现
weixin_52721608的博客
01-21 1096
如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统电影购票信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个电影购票系统，可以解决许多问题。该系统采用了Mysql数据库，Java语言，SSM框架等技术进行编程实现。电影购票系统可以提高电影购票信息管理问题的解决效率，优化电影购票信息处理流程，保证电影购票信息数据的安全，它是一个非常可靠，非常安全的应用程序。
基于SSM的电影院购票系统开源啦
java小白翻身
06-15 1544
基于Spring，SpringMVC，Mybatis开发实现。数据库用的是MySQL5.5。开发工具用的Eclipse + Tomcat7，JDK1.7-1.8皆可。首页电影详情页购票登录注册页面后台管理页面电影信息列表添加电影信息电影票管理订单管理热点新闻管理本项目主要实现了电影的新增，修改和删除功能。电影新增可以上传封面图片，最终都会显示在首页的。
ssm电影院订票系统的设计与实现 计算机毕设源码91214
weixin_ZYKJ985的博客
09-19 434
该系统以Java编程语言、Mysql和MVC等为开发技术，实现了添加、修改、查看、删除系统数据。本系统采取组件化的方式对系统进行拆分，并对数据库中各个表的增删查改、表与表之间的约束关系进行分析与设计，最终实现符合用户需求功能的商业级应用。 系统界面简洁大方，布局合理，易操作易上手。对应用户的每一步操作，系统都能高响应地做出反馈。系统具体包含对用户的管理、电影资讯管理、电影类别管理、电影信息管理、购票管理、订单管理、登录注销、等功能，为电影院购票提供一个管理平台，实现对数据地高效、安全地管理.....
电影票订票系统标程
06-19
电影票订票系统标程.docx
网上电影购票系统(源码+开题报告)
liu10611的博客
01-20 1541
首先，该系统可以实现对用户、电影类型、电影应用功能等功能的管理和查询，方便管理者了解电影行业的需求和服务情况。然后，我们将设计电影应用功能模块，根据读者的需求进行电影应用功能的管理和查询。然而，传统的网上电影购票方式往往只提供简单的电影信息和购票服务，无法满足用户对电影类型、应用功能等方面的需求。研究目的： 本研究的目的是设计和实现一个用户友好、功能完善的网上电影购票系统，通过对用户、电影类型、电影应用功能等功能的设计与实现，提供便捷、准确的在线购票服务和个性化推荐服务。最终成品以下面运行环境。
电影票在线售票系统
08-05
完整的一个电影票在线售票系统，适合大家学习
电影票网上售票系统
07-14
电影票网上售票系统很好很好报告格式非常好
电影购票系统项目代码
04-07
这是对应的电影购票系统代码。
电影购票系统
08-09
使用三层架构实现展示电影，查找电影(模糊查询)，查看电影详情，查找场次，购买影票，订制座位，退订影票等功能，界面美观漂亮，逻辑严密无漏洞，需要的的可以下载。效果查看地址:https://blog.csdn.net/zouzong123/article/details/81534635
电影票销售系统项目源代码+文档
02-21
项目功能简介如下： 浏览上映影片： 按照图1所示的格式将数据库中的上映影片数据展示出来，并显示“订票”链接。上映影片信息包括：影片名称、上映日期、上映时间、上映影厅。 选择座位： 首先根据选择的上映影片信息中的“上映影厅”显示该影厅的座位情况。未订出的显示为黄色，已订出的显示为红色。可以通过单击座位进行选择。单击黄色座位则座位颜色变成绿色，表示是您选定的座位；单击绿色座位则座位颜色变为黄色，表示取消了选定；可同时选择多个座位；红色座位不能被选定。 影票种类有三种：普通票、团体票和学生票，票价各不同。如果选择团体票则必须同时选定6个（含）以上的座位。 选择好座位和影票种类后点“确定订票”进入“确定订票”页面。 确认订票： 首先根据用户已经选定的上映信息、座位和影票类型显示影票预览。 用户确认无误后，填入会员卡号和会员卡密码，完成结算。用户的会员卡卡号、密码、剩余金额保存在数据库中。如果会员卡号或密码不正确、会员卡余额不足或者选定影票已经被订出，则给出用户明确提示；如果结算成功，则从会员卡中扣除相应金额，重定向到“浏览已订影票”页面。 浏览已订影票： 可以根据会员卡号和会员卡密码查询出该会员订过的所有影票。如果当前时间到影片的开场时间超过2小时，则显示“取消”链接。 取消订票：如果当前时间到影片开场时间超过2小时，则可以取消订票。取消后对应的座位重新变成“未订出”，返还票面金额到会员卡中。该条订票信息状态变成“已取消”。 查看影票： 在“浏览已订影票”页面，点“影票”链接则对应影票。
电影网上购票系统设计与实现(论文+系统)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
11-06 3058
毕业设计+论文+系统+远程调试+程序开发 毕业设计+论文+系统+远程调试+程序开发 毕业设计+论文+系统+远程调试+程序开发
电影院订票售票系统设计与实现
杭州.黄老师
02-13 8710
本课题主要目标是设计并能够实现一个基于java的电影院订票选座系统，系统整体使用了基于java+MySql的B/S架构，技术上使用了springboot框架；使用浏览器，管理员通过后台添加电影、场次，用户通过浏览器登录系统，查看电影、订购电影票、选择座位。：影院售票系统是计算机技术与影院管理相结合的产物，通过影院售票系统实现了对影院的高效管理。随着计算机技术的不断提高,计算机已经深入到社会生活的各个角落.而采用人工售票的方法，不仅效率低，易出错，手续繁琐，而且耗费大量人力。
【HTML】HTML作业-----影院售票界面
coding加油站
08-15 3115
web前端作业，html作业，影院售票系统
电影票订票系统springboot实战项目
04-04
电影票订票系统是一个非常实用的系统，能够帮助用户更加方便地购买电影票。本文将介绍如何使用Spring Boot框架实现电影票订票系统。 1. 项目概述 电影票订票系统是一个在线购票平台，用户可以在该平台上购买电影票...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值