前端小項目（一）| 電影院座位預定

---

前言

開始好好學習前端啦。學紫色愛心記錄一波！！

初步學了html，css，js，在github上找了幾個前端小項目模仿著練練手。第一個就是電影院座位預定頁面，主要的功能是：選擇看哪部電影、選擇座位、自動生成價格。

完整代碼放在https://github.com/titibabybaby/FED/tree/main/movie%20seat%20booking 學習github上大佬bradtraversy的demo，感謝~

效果長這樣~

---

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展示的被選擇的（三文魚色），其本身是未被選擇狀態（灰色）。

.seat.occupied{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

1.const定義變量
const container: 從.seat-container
const seats: 從.seat:(not occupied
const num：記錄選擇的電影票數量
const price：總價格
const movieSelect：選擇的電影座位
const selectedMovieIndex = localStorage.getItem (‘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); }

• 更新選擇的電影總數num以及價格price

function updateSelectedCount(){const selectedSeats=document.querySelectorAll('.seat.selected');//.map()返回一個新數組,里面存著選擇的座位的indexconst 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.parse(localStorage.getItem('selectedSeats'));if(selectedSeats!=null&&selectedSeats.length>0){seats.forEach((seat,index)=>{if(selectedSeats.indexOf(index)>-1){//加屬性.selectedseat.classList.add('selected');}});} }

• 兩個事件

//選擇movie事件 movieSelect.addEventListener('change',e=>{ticketPrice=+e.target.value;updateSelectedCount(); });//點擊seat事件 container.addEventListener('click', e => {if (e.target.classList.contains('seat') &&!e.target.classList.contains('occupied')) {e.target.classList.toggle('selected');updateSelectedCount();}});

完結撒花~感覺記錄了一下印象也更深刻了。

總結

以上是生活随笔為你收集整理的前端小项目（一）| 电影院座位预定（html，css，js）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。