<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/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;
}
</style>
</head>
<body>
<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>
<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>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/177616.html
標籤：其他
上一篇：前端HTML mate