html部分:
"movie-container"> 欢迎来到cyg在线影院选择影片: "movie">"32">寄生虫（票价：32元）"35">小丑（票价：35元）"38">好莱坞往事（票价：38元）"30">玩具总动员（票价：30元）"showcase">"seat">可选"seat selected">已选"seat occupied">不可选"screen">"container"> "row"> "seat">"seat">"seat">"seat">"seat">"seat">"seat">"seat">"row"> "seat">"seat">"seat">"seat occupied">"seat occupied">"seat">"seat">"seat">"row"> "seat">"seat">"seat">"seat">"seat">"seat">"seat occupied">"seat occupied">"row"> "seat">"seat">"seat">"seat">"seat">"seat">"seat">"seat">"row"> "seat">"seat">"seat">"seat occupied">"seat occupied">"seat">"seat">"seat">"row"> "seat">"seat">"seat">"seat">"seat occupied">"seat occupied">"seat occupied">"seat">"text"> 您已经选择了:"count">0个座位,总计票价为"total">0元 图片: 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开始哦
