预定电影座位
此项目是仿照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是不一样的。
