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 开始哦
版权声明: 本文为 InfoQ 作者【贵哥的编程大路】的原创文章。
原文链接:【http://xie.infoq.cn/article/12053e180a463e68ab37095f6】。未经作者许可,禁止转载。
贵哥的编程大路
不成就忍耐到成。我没有什么本事,只会忍耐 2020.10.03 加入
还未添加个人简介
评论