需求描述

image.png
如图, 有4个区域需要注意

  1. 影片选择区, 要能获取到选择的影片对应的价格.
  2. 标记示例区, 与下方的图标颜色形状大小一致, 但只是示例, 不参与用户交互, 不与选座数据混淆.
  3. 荧幕区, 用css模拟出第一视角的观看体验.
  4. 座位区, 白色为不可选, 灰色为可选, 选中后变为蓝色, 再次点击变为灰色.
  5. 数据统计区, 能统计已选座位数, 并根据单价计算总费用.

此外, 选中的影片, 座位序列和总票价需要存入本地存储.

实现

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <link rel="stylesheet" href="style.css">
  6.   <title>电影座位预订</title>
  7. </head>
  8. <body>
  9.   <h1>欢迎来到米修影院</h1>
  10.   <div class="movie-container">
  11.     <label for="movie">选择影片</label>
  12.     <select id="movie">
  13.       <option value="32">寄生虫 (票价: 32元)</option>
  14.       <option value="35">小丑 (票价: 35元)</option>
  15.       <option value="38">好莱坞往事 (票价: 38元)</option>
  16.       <option value="30">玩具总动员 (票价: 30元)</option>
  17.     </select>
  18.   </div>
  19.   <ul class="showcase">
  20.     <li>
  21.       <div class="seat"></div>
  22.       <small>可选</small></li>
  23.     <li>
  24.       <div class="seat selected"></div>
  25.       <small>已选</small></li>
  26.     <li>
  27.       <div class="seat occupied"></div>
  28.       <small>不可选</small></li>
  29.   </ul>
  31.   <div class="container">
  32.     <div class="screen"></div>
  33.     <div class="row">
  34.       <div class="seat"></div>
  35.       <div class="seat"></div>
  36.       <div class="seat"></div>
  37.       <div class="seat"></div>
  38.       <div class="seat"></div>
  39.       <div class="seat"></div>
  40.       <div class="seat"></div>
  41.       <div class="seat"></div>
  42.     </div>
  43.     <div class="row">
  44.       <div class="seat"></div>
  45.       <div class="seat"></div>
  46.       <div class="seat"></div>
  47.       <div class="seat occupied"></div>
  48.       <div class="seat occupied"></div>
  49.       <div class="seat"></div>
  50.       <div class="seat"></div>
  51.       <div class="seat"></div>
  52.     </div>
  53.     <div class="row">
  54.       <div class="seat"></div>
  55.       <div class="seat"></div>
  56.       <div class="seat"></div>
  57.       <div class="seat"></div>
  58.       <div class="seat"></div>
  59.       <div class="seat"></div>
  60.       <div class="seat occupied"></div>
  61.       <div class="seat occupied"></div>
  62.     </div>
  63.     <div class="row">
  64.       <div class="seat"></div>
  65.       <div class="seat"></div>
  66.       <div class="seat"></div>
  67.       <div class="seat"></div>
  68.       <div class="seat"></div>
  69.       <div class="seat"></div>
  70.       <div class="seat"></div>
  71.       <div class="seat"></div>
  72.     </div>
  73.     <div class="row">
  74.       <div class="seat"></div>
  75.       <div class="seat"></div>
  76.       <div class="seat"></div>
  77.       <div class="seat occupied"></div>
  78.       <div class="seat occupied"></div>
  79.       <div class="seat"></div>
  80.       <div class="seat"></div>
  81.       <div class="seat"></div>
  82.     </div>
  83.     <div class="row">
  84.       <div class="seat"></div>
  85.       <div class="seat"></div>
  86.       <div class="seat"></div>
  87.       <div class="seat"></div>
  88.       <div class="seat occupied"></div>
  89.       <div class="seat occupied"></div>
  90.       <div class="seat occupied"></div>
  91.       <div class="seat"></div>
  92.     </div>
  93.   </div>
  95.   <p class="text">
  96.     您已经选择了 <span id="count">0</span> 个座位, 总计票价为 <span id="total">0</span> 元
  97.   </p>
  98.   <script src="script.js"></script>
  99. </body>
  100. </html>

这个HTML感觉写得有点蠢. 先实现功能吧, 后面有时间再来优化.

CSS部分

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background: #242333;
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12.   justify-content: center;
  13.   min-height: 100vh;
  14.   font-family: "Helvetica", "Arial", sans-serif;
  15. }
  17. .movie-container {
  18.   margin: 20px 0;
  19. }
  21. .movie-container select {
  22.   background-color: #fff;
  23.   border: 0;
  24.   border-radius: 5px;
  25.   font-size: 14px;
  26.   margin-left: 10px;
  27.   padding: 5px 15px;
  28.   /*以下是对于苹果系统的设置, 不设置的话padding会没有效果*/
  29.   -moz-appearance: none;
  30.   -webkit-appearance: none;
  31.   appearance: none;
  32. }
  34. .seat {
  35.   height: 12px;
  36.   width: 15px;
  37.   background-color: #444451;
  38.   margin: 3px;
  39.   border-top-right-radius: 10px;
  40.   border-top-left-radius: 10px;
  41. }
  43. .seat.selected {
  44.   background-color: #6feaf6;
  45. }
  47. .seat.occupied {
  48.   background-color: #fff;
  49. }
  51. /*选中从前往后第2个*/
  52. .seat:nth-of-type(2) {
  53.   margin-right: 18px;
  54. }
  56. /*选中从后往前第二个*/
  57. .seat:nth-last-of-type(2) {
  58.   margin-left: 18px;
  59. }
  61. /*可选和已选都有鼠标移入动画, 这里用:not()把 .occupied去除掉*/
  62. .container .seat:not(.occupied):hover {
  63.   cursor: pointer;
  64.   transform: scale(1.2);
  65. }
  67. /*.seat:not(.occupied) {*/
  68. /*  transition: all 0.2s ease;*/
  69. /*}*/
  71. .showcase {
  72.   background-color: rgba(0, 0, 0, 0.1);
  73.   padding: 5px 10px;
  74.   border-radius: 5px;
  75.   color: #777;
  76.   list-style-type: none;
  77.   display: flex;
  78.   justify-content: space-between;
  79.   margin-bottom: 10px;
  80. }
  82. .showcase li {
  83.   display: flex;
  84.   align-items: center;
  85.   justify-content: center;
  86.   margin: 0 10px;
  87. }
  89. .showcase li small {
  90.   margin-left: 2px;
  91. }
  94. .container {
  95.   /*添加视距*/
  96.   perspective: 1000px;
  97.   margin-bottom: 10px;
  98. }
  100. .screen {
  101.   background-color: #fff;
  102.   height: 70px;
  103.   width: 100%;
  104.   margin: 15px 0;
  105.   transform: rotateX(-45deg); /*在父元素中添加视距才能看到3D效果*/
  106.   box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  107. }
  109. .row {
  110.   display: flex;
  111. }
  113. .text {
  114.   margin: 5px 0;
  115. }
  117. .text span {
  118.   color: #6feaf6;
  119. }

这里的重点: 对苹果系统的兼容( apperance 属性), 伪类选择器 :nth-of-type(n) 和 :not() 的应用, transform-totate 和 perspective的结合应用.

JavaScript部分

  1. const container = document.querySelector('.container')
  2. const seats = document.querySelectorAll('.row .seat:not(.occupied)')
  3. const count = document.getElementById('count')
  4. const total = document.getElementById('total')
  5. const movieSelect = document.getElementById('movie')
  6. //value是字符串, 用+号饮食转换成Number
  7. let ticketPrice = +movieSelect.value
  10. //初始化渲染座位和影片
  11. populateUi()
  13. //更新座位数及总票价
  14. function updateSelectedCount(){
  15.   //获取已选座位的数组
  16.   const selectedSeats = document.querySelectorAll('.row .seat.selected')
  17.   //map()方法会像forEach()那样遍历一个数组, 然后对每项处理后返回一个新的数组
  18.   const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat))
  20.   localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex))
  22.   const selectedSeatsCount = selectedSeats.length
  23.   count.innerText = selectedSeatsCount.toString()
  24.   total.innerText = (selectedSeatsCount * ticketPrice).toString()
  25. }
  28. //保存电影索引值和票价
  29. function setMovieData(movieIndex, moviePrice){
  30.   localStorage.setItem('selectedMovieIndex', movieIndex)
  31.   localStorage.setItem('selectedMoviePrice', moviePrice)
  32. }
  34. //封装函数获取本地数据并渲染样式
  35. function populateUi(){
  36.   //获取座位信息
  37.   const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'))
  38.   if (selectedSeats !== null && selectedSeats.length > 0){
  39.     seats.forEach((seat, index) => {
  40.       if (selectedSeats.indexOf(index) > -1){
  41.         seat.classList.add('selected')
  42.       }
  43.     })
  44.   }
  45.   //获取影片信息
  46.   const selectedMovieIndex = localStorage.getItem('selectedMovieIndex')
  47.   console.log(selectedMovieIndex)
  48.   if (selectedMovieIndex !== null){
  49.     movieSelect.selectedIndex = selectedMovieIndex
  50.   }
  51. }
  53. //监听电影下拉框
  54. movieSelect. addEventListener('change', e => {
  55.   ticketPrice = +e.target.value
  56.   setMovieData(e.target.selectedIndex, e.target.value)
  57.   updateSelectedCount()
  58. })
  60. //绑定座位点击事件, 时间冒泡
  61. container.addEventListener('click', e => {
  62.   // console.log(e.target)
  63.   //使用classList数组的contains方法, 检测数组中是否包含某一项
  64.   if (e.target.classList.contains('seat') &&
  65.     !e.target.classList.contains('occupied')){
  66.     //使用classList 的toggle方法, 有则删除, 无则加入
  67.     e.target.classList.toggle('selected')
  68.     updateSelectedCount()
  69.   }
  70. })
  71. //设置初始座位和总票价
  72. updateSelectedCount()

这里有一个重要bug, 页面加载完数据后, 再切换影片, 再刷新页面, 显示的还是之前的票价, 待修复.