前端⼩项⽬（⼀）电影院座位预定（html，css，js）
前端⼩项⽬（⼀）| 电影院座位预定
前⾔
开始好好学习前端啦。学紫⾊爱⼼记录⼀波！！
初步学了html，css，js，在github上了⼏个前端⼩项⽬模仿着练练⼿。第⼀个就是电影院座位预定页⾯，主要的功能是：选择看哪部电影、选择座位、⾃动⽣成价格。
效果长这样~
1.html
html代码主要是搭建整体框架、结构：
movie-container ：可以选择的电影|movie
showcase ：展⽰屏幕+三种座位类型|seat、seat seatshow、seat occupied
seat-container：座位部分，6⾏8列|row|seat/seat occupied
text：显⽰选择的个数和总价格|num、price
<div class="movie-container">
<label>pick a movie : </label>
<select id="movie">
<option value="32">头⽂字D（￥32）</option>
<option value="38">想见你（￥38）</option>
<option value="35">禁闭岛（￥35）</option>
<option value="30">阳光妹淘（￥30）</option>
</select>
</div>
<ul class="showcase">
<li>
<div class="seat"></div>
<small>Avaliable</small>
</li>
<li>
<div class="seat seatshow"></div>
<small>Selected</small>
</li>
<li>
<div class="seat occupied"></div>
<small>Occupied</small>
</li>
</ul>
座位部分放⼀点~重复就ok
<div class="seat-container">
<div class="screen"></div>
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
</div>
<div class="text">
<p>You have selected <span id=num>num</span>
seats for a price of
<span id="price">price</span>
</p>
</div>
2. CSS
主要是设计丰富html元素的样式：
对class类，css⽤ .
对id属性的，css⽤ #
Note：
body、movie-container、showcase、row、li…都⽤的弹性布局：display: flex;
justify-content：
align-items：
接下来贴我觉得重要的代码~
body{
background-color:darkslategray;
font-family:Cambria, Cochin, Georgia, Times,'Times New Roman', serif; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.movie-container{
display: flex;
justify-content: center;/*弹性容器属性*/
align-items: center;/*弹性布局容器属性*/
width: 800px;
height: auto;
margin: 100px auto 0 auto;
}
.showcase{
background-color:olive;
border-radius: 3px;
display: flex;
justify-content: space-between;
list-style-type: none;
width: 300px;
margin: 30px auto;
padding: 5px 10px;
}
.
showcase li{
color:lightgray;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
关于.screen，屏幕的设计：⾸先先画⼀个矩形，然后⽤transform让它沿x轴旋转，注意还要在其⽗元素seat-container上调整视⾓距离perspective，调近⼀些。才会看起来明显是⼀个梯形，像电影屏幕~
.screen{
margin:5px auto 20px auto;
width: 250px;
height: 60px;
transform:rotateX(-28deg);
background-color: snow;
box-shadow: 0 3px 10px rgba(250, 246, 246, 0.7);/*0.7是不透明度*/
}
关于seat，⾸先画⼀个⼩正⽅形，然后让其上⾯左右都有⼀个圆边⾓，就像⼀个⼩座位啦~
.seat{
background-color:darkgrey;
width: 15px;
height: 12px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin: 0px 3px;
}
.seat设置了三种属性，被占⽤的（⽩⾊），当前选择的（三⽂鱼⾊），在showcase展⽰的被选择的（三⽂鱼⾊），其本⾝是未被选择状态（灰⾊）。
.upied{
background-color:floralwhite;
}
.seat.selected{
background-color:salmon;
}
.seat.seatshow{
background-color:salmon;
}
.seat:not(.occupied):hover{
background-color: salmon;
transform:scale(1.2);
cursor:pointer;
}
.seat:not(.occupied):active{
background-color: salmon;
cursor:pointer;
}
.
seat:nth-last-of-type(2){
margin-left: 20px;
}
.seat:nth-last-of-type(6){
margin-left: 20px;
}
3.JavaScript
const container: 从.seat-container
const seats: 从.seat:(not occupied
const num：记录选择的电影票数量
const price：总价格
const movieSelect：选择的电影座位
const selectedMovieIndex = Item (‘selectedMovieIndex’);
2.let定义变量（可变的）
ticketPrice = + movieSelect.value
3.声明函数
保存选择的电影的index和moviePrice（价格）
function setMovieData(movieIndex, moviePrice){
//localStorage.setItem(key,value) 是本地存储，永久性的，将value存储在key字段
localStorage.setItem('selectedMovieIndex',movieIndex);
localStorage.setItem('selectedMoviePrice',moviePrice);
}
showcase更新选择的电影总数num以及价格price
function updateSelectedCount(){
const selectedSeats=document.querySelectorAll('.seat.selected');
//.map()返回⼀个新数组,⾥⾯存着选择的座位的index
const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat));
//存储在本地
localStorage.setItem('selectedSeats',JSON.stringify(seatsIndex));
//计算选择的座位数量，并写到num⾥
const selectedSeatsCount=selectedSeats.length;
num.innerText=selectedSeatsCount;
/
/计算总价格
price.innerText=selectedSeatsCount*ticketPrice;
//将选择的电影和相对于的价格存储在本地
setMovieData(movieSelect.selectedIndex,movieSelect.value);
}
更新populateUI（把被选中的seat加⼀个selected属性）
//从localStorage获取数据selectedSeats数据，并把被选中的seat加⼀个selected属性，更新populate UI function populateUI(){
//JSON.parse() ⽅法将数据转换为 JavaScript 对象。
selectedSeats=JSON.Item('selectedSeats'));
if(selectedSeats!=null&&selectedSeats.length>0){
seats.forEach((seat,index)=>{
if(selectedSeats.indexOf(index)>-1){
//加属性.selected
seat.classList.add('selected');
}
});
}
}
两个事件
//选择movie事件
movieSelect.addEventListener('change',e=>{
ticketPrice=+e.target.value;
updateSelectedCount();
});
//点击seat事件
container.addEventListener('click', e =>{
if(
e.ains('seat')&&
!e.ains('occupied')
){
e.le('selected');
updateSelectedCount();
}
});
完结撒花~感觉记录了⼀下印象也更深刻了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。