js逐步教你实现原生电影院系统

时间:2022-07-28
本文章向大家介绍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(

)像这种.就渲染选中的颜色.

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

这个函数的意思是;保存/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开始哦