写点什么

js 逐步教你实现原生电影院系统 (html 逻辑 css 逻辑 js 逻辑)

发布于: 2021 年 03 月 22 日
js逐步教你实现原生电影院系统(html逻辑 css逻辑  js逻辑)

html 部分:


<div class="movie-container">		<h1>欢迎来到cyg在线影院</h1>		<div>			选择影片:			<select id="movie">				<option value="32">寄生虫(票价:32元)</option>				<option value="35">小丑(票价:35元)</option>				<option value="38">好莱坞往事(票价:38元)</option>				<option value="30">玩具总动员(票价:30元)</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="screen"></div>			<div class="container">				<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"></div>					<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>				<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 occupied"></div>					<div class="seat occupied"></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"></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 occupied"></div>					<div class="seat occupied"></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 occupied"></div>					<div class="seat occupied"></div>					<div class="seat occupied"></div>					<div class="seat"></div>				</div>			</div>			<p class="text">				您已经选择了:<span id="count">0</span>个座位,总计票价为<span id="total">0</span>元			</p>	</div>
复制代码


图片:


css 部分:


*{padding: 0px;margin: 0px;list-style: none;}		body		{			background-color: #242333;			color: #fff;			display: flex;			align-items: center;			justify-content: center;			height: 100vh;			font-family: Arial, Helvetica, sans-serif;		}		h1		{			margin-bottom: 20px;		}		.movie-container select		{			background-color: #fff;			border:0;			border-radius: 5px;			font-size: 14px;			padding: 5px 15px;			margin-left: 10px;		}		.seat		{			background-color: #444451;			height: 12px;			width: 15px;			border-top-right-radius: 10px;			border-top-left-radius: 10px;			margin: 3px;		}		.seat.selected		{			background-color: #6feaf6;		}		.seat.occupied {		  background-color: #fff;		}		.seat:nth-of-type(2)		{			margin-right: 18px;		}		.seat:nth-last-of-type(2) {		  margin-left: 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;			  margin-top: 20px;			  justify-content: space-between;		}		.showcase li {  display: flex;  align-items: center;  justify-content: center;  margin: 0 10px;}
.showcase li small { margin-left: 2px;}.container{ perspective: 1000px; margin-bottom:30px; margin-left: 60px;}.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);}.row{ display: flex;}.text{ margin: 5px 30px;}.text span{ color: #6feaf6;}
复制代码

css 逻辑;

第一步 body;清除系统默认的样式.

第二步 h1:body 里面的 flex 布局,主轴 x 居中,侧轴 y 垂直居中.高度为 height: 100vh;,为什么,因为系统默认宽为 100%,高为 0,要垂直居中得 100vh 高度才行啊.

第三步:

设置 select 里面的颜色为 #fff,边框为无,文字为 14px

,本身水平扩大 5px,垂直扩大 15.距离选择影片 10px.

第四:

这里面的

设置默认颜色为 #444451,高度为 12px,宽度为 15px,左上角与右上角都是 10px,代表某一个角度的水平与垂直都去掉 10px,并且每个元素距离他都是 3px.


第五:

覆盖之前的颜色改为:


第七步:

代表



第八步:

意思是:

第一步:在.seat 中当没有不可选的时候,:hover 的时候,

倍数变大到 1.2,

第二步;在.showcase 的区域内,没有效果.(就算触碰到没有不可选的情况下)也没有效果.


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



图片:


.showcase		{			background-color: rgba(0,0,0,0.1);			padding: 5px 10px;			border-radius: 5px;			  color: #777;			  list-style-type: none;			  display: flex;			  margin-top: 20px;			  justify-content: space-between;		}		.showcase li {  display: flex;  align-items: center;  justify-content: center;  margin: 0 10px;}
复制代码



.showcase		{			background-color: rgba(0,0,0,0.1);			padding: 5px 10px;			border-radius: 5px;			  color: #777;			  list-style-type: none;			  display: flex;			  margin-top: 20px;			  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;}
复制代码

让 seat 不在全部都垂直排列.flex 是水平排列的.


js 部分;


<script type="text/javascript">		const container = document.querySelector(".container");		const seats = document.querySelectorAll(".row .seat:not(.occupied)");		const count = document.getElementById("count");		const total = document.getElementById("total");		const movieSelect = document.getElementById("movie");		let ticketPrice = +movieSelect.value;//加+代表Number,不加代表字符串		populateUI();		movieSelect.addEventListener('change',e=>// 电影下拉框事件监听		{			ticketPrice=+e.target.value;//意思是:某一个option的值强行变成Number赋值给票价			setMovieData(e.target.selectedIndex,e.target.value);			//console.log(e.target.selectedIndex,e.target.value);//index从0开始,值为value			undateSeletedCount();		});//下拉框改变时		container.addEventListener("click",e=>// 座位点击事件		{			if(e.target.classList.contains("seat")&&!e.target.classList.contains("occupied"))//意识是如果e.target标签中包含seat的话并且e.target中不包含occupied			{				e.target.classList.toggle("selected");				undateSeletedCount();			}		});		function setMovieData(movieIndex, moviePrice)//保存电影索引值和票价		{			//保存到本地存储中			localStorage.setItem("selectedMovieIndex", movieIndex);//电影索引值			localStorage.setItem("selectedMoviePrice", moviePrice);//票价		}		function undateSeletedCount()/// 更新座位数及总票价		{			const selectedSeats=document.querySelectorAll(".row .seat.selected");			//console.log(selectedSeats);//如果这里要有值得点击某一个座位			const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));//把点击的座位			//console.log(...seats);//这以上的两句的意思是:点击的[...selectedSeats].map(seat)在[...seats].indexOf(seat)中第一次出现的索引值.			//保存到本地存储中.			localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex));//意思是因为是数组所以转换为字符串然后保存到本地存储中.
const selectedSeatsCount = selectedSeats.length;//点击的数量 count.innerText = selectedSeatsCount;//数量(座位) total.innerText = selectedSeatsCount * ticketPrice;//*起来的票价 /**/ //console.log( "座位"+count.innerText ,"票价"+total.innerText); } function populateUI() {// 获取本地数据并渲染样式 const selectedSeats=JSON.parse(localStorage.getItem("selectedSeats"));//点击的 if(selectedSeats!=null&&selectedSeats.length>0) {//意思是:保存起来的点击的正方形。不为空并且至少有一个的话. seats.forEach((seat,index)=>//遍历渲染颜色 { if(selectedSeats.indexOf(index)>-1) { seat.classList.add("selected"); } }); } const selectedMovieIndex = localStorage.getItem("selectedMovieIndex"); //意思是option的index值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。 // movieSelect.selectedIndex 代表哪一个option从0开始哦 if (selectedMovieIndex !== null) { movieSelect.selectedIndex = selectedMovieIndex; } } </script>
复制代码


js 逻辑;

第一步;获取需要的.


const container = document.querySelector(".container");		const seats = document.querySelectorAll(".row .seat:not(.occupied)");		const count = document.getElementById("count");		const total = document.getElementById("total");		const movieSelect = document.getElementById("movie");		let ticketPrice = +movieSelect.value;
复制代码


第二步:


movieSelect.addEventListener('change',e=>		{			ticketPrice=+e.target.value;	setMovieData(e.target.selectedIndex,e.target.value)			undateSeletedCount();		});
复制代码

意思是;电影下拉框下拉的时候,某一个 option 的值+变成数字赋值给票价.


container.addEventListener("click",e=>		{			if(e.target.classList.contains("seat")&&!e.target.classList.contains("occupied"))			{				e.target.classList.toggle("selected");				undateSeletedCount();			}		});
复制代码

这个函数的意思是;点击座位触发的事件,条件是:

如果 e.target 标签中包含 seat 的话并且 e.target 中不包含 occupied(<div class="seat"></div>)像这种.就渲染选中的颜色.


function setMovieData(movieIndex, moviePrice)		{						localStorage.setItem("selectedMovieIndex", movieIndex);			localStorage.setItem("selectedMoviePrice", moviePrice);		}
复制代码


这个函数的意思是;保存<option value="">/option>的某一个,和保存票价.


function undateSeletedCount()		{			const selectedSeats=document.querySelectorAll(".row .seat.selected");						const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));						localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex));中.
const selectedSeatsCount = selectedSeats.length; count.innerText = selectedSeatsCount; total.innerText = selectedSeatsCount * ticketPrice; }
复制代码

这个函数的逻辑是;更新座位数和总票价的。

第一步:先获取选中的座位号,

第二步:点击的座位号的索引保存。

第三步:保存到本地存储中.因为是数组所以转换为字符串然后保存到本地存储中.


第四步:计算座位的数量,和座位*票价的得出了的总票价.


function populateUI() {// 获取本地数据并渲染样式			const selectedSeats=JSON.parse(localStorage.getItem("selectedSeats"));//点击的			if(selectedSeats!=null&&selectedSeats.length>0)			{//意思是:保存起来的点击的正方形。不为空并且至少有一个的话.				seats.forEach((seat,index)=>//遍历渲染颜色					{						if(selectedSeats.indexOf(index)>-1)						{							seat.classList.add("selected");						}					});			}			  const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");			  //意思是option的index值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。			  // movieSelect.selectedIndex 代表哪一个option从0开始哦			   if (selectedMovieIndex !== null) {    movieSelect.selectedIndex = selectedMovieIndex;  }		}
复制代码


意思是;

第一步:获取到本地存储中的点击的数据,

第二步:如果有的话,就渲染颜色,

意思是 option 的 index 值,在不为空的条件下,点击的是哪一个就赋值设置哪一个·的座位与票价。

// movieSelect.selectedIndex 代表哪一个 option 从 0 开始哦


发布于: 2021 年 03 月 22 日阅读数: 8
用户头像

不成就忍耐到成。我没有什么本事,只会忍耐 2020.10.03 加入

还未添加个人简介

评论

发布
暂无评论
js逐步教你实现原生电影院系统(html逻辑 css逻辑  js逻辑)