预定电影座位
此项目是仿照vanillawebprojects里的movie-seat-booking写的。
本项目用到的技术有：html+css+javaScript。
项目演示
这是一打开的页面
这是选择电影的页面
项目代码
html页面代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影选座</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="movie_container">
<label for="">选择一部电影：</label>
<select name="movie" id="movie">
<option value="19.8">这么多年(￥19.8)</option>
<option value="25.6">人生路不熟（￥25.6）</option>
<option value="30">倒数说爱你（￥30）</option>
<option value="48.8">龙马精神（￥48.8）</option>
</select>
</div>
<ul class="showcase">
<li>
<div class="seat"></div>
<i>可选</i>
</li>
<li>
<div class="seat selected"></div>
<i>已选择</i>
</li>
<li>
<div class="seat occupied"></div>
<i>已售</i>
</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 class="seat"></div>
<div class="seat"></div>
</div>
<div class="row">
<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 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"></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 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"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
</div>
<p>您已经选择了<span class="count">1</span>个座位，共计<span class="total">100</span>元</p>
</div>
<script src="./index.js"></script>
</body>
</html>
css页面代码如下
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #242333;
color: #fff;
}
.movie_container #movie {
margin-left: 10px;
padding: 5px 15px;
font-size: 14px;
border-radius: 5px;
appearance: none;
}
.showcase {
margin: 16PX;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background: 0, 0, 0, 0.1;
}
.showcase li {
margin: 10px;
display: flex;
font-size: 14px;
}
.seat {
background-color: #444451;
height: 12px;
width: 15px;
margin: 3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.seat.selected {
background-color: #6feaf6;
}
.seat.occupied {
background-color: #FFF;
}
.container {
perspective: 1000px;
}
.container .screen {
width: 200px;
height: 70px;
margin: 15px;
background-color: #fff;
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
transition: all 0.3s;
transform: rotateX(-45deg);
}
.container .row {
display: flex;
}
.container .row .seat {
transition: all 0.2s;
}
.container .row .seat:nth-child(2),
.container .row .seat:nth-child(8) {
margin-right: 15px;
}
.container .row .seat:not(.occupied):hover {
transform: scale(1.2);
cursor: pointer;
}
.container p {
margin: 30px 0px;
font-size: 14px;
}
.container p span {
color: #6feaf6;
}
js页面代码如下
const container=document.querySelector(".container")
const movie=document.querySelector('#movie')
const count=document.querySelector(".count")
const total=document.querySelector(".total")
// console.log(seats);
//获取总价和数量
function updateSelectedCount(){
const selected = document.querySelectorAll('.container .selected')
// console.log(selected.length*+movie.value);
count.innerHTML=selected.length
total.innerHTML=(selected.length*+movie.value).toFixed(2)
}
//选电影座位
container.addEventListener('click',e=>{
// console.dir();
if(e.target.classList.contains('seat')&&
!e.target.classList.contains('occupied')){
e.target.classList.toggle('selected')
// console.log(e.target.classList);
}
updateSelectedCount()
})
//选电影的场次
movie.addEventListener('change',e=>{
updateSelectedCount()
})
updateSelectedCount()
写在最后的话
虽然项目是仿照着写出来的，但是js的实现方式和vanillawebprojects是不一样的。
