原生JS-预定电影票

Jackie_Mina

已于 2023-02-08 15:03:50 修改

阅读量96

点赞数 1

分类专栏： javascript 前端文章标签： javascript

于 2023-02-08 14:51:33 首次发布

本文链接：https://blog.csdn.net/weixin_36752088/article/details/128935583

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

本文档为学习笔记，原课程为米修在线的50个实战彻底掌握原生JS

<!--html-->
<!--html-->
<h1>欢迎来到xx在线影院</h1>
 <div class="movieContainer">
       <label>选择影片</label>
       <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="container">
       <div class="screen"></div>
       <!--一排8个座位，共6排-->
       <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>

在这里插入图片描述

/*css*/
*{
      box-sizing: border-box;
}

body{
      background-color: #242333;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
}
.movieContainer{
      margin: 20px 0;
}

.movieContainer select{
      background-color: #fff;
      border: 0;
      border-radius: 5px;
      font-size: 14px;
      margin-left: 10px;
      padding: 5px 15px;
}

.seat{
      background-color: #444451;
      width: 15px;
      height: 12px;
      margin: 3px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
}
.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;
      display: flex;
      justify-content: space-between;
      list-style: none;
}
.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;
}

.screen{
      background-color: #fff;
      height: 70px;
      width: 100%;
      margin: 15px 0;
      transform: rotateX(-45);
      box-shadow: 0 3px 10px rgba(255,255,255,0.7);
}
.row{
      display: flex;
}

.text{
      margin: 5px 0;
}
.text span{
      color:#6feaf6;
}

在这里插入图片描述

//JS
//对座位事件监听，并排除不可选座位，当选中某个座位元素的时候，类名切换为已选=selected
//更新已选座位数和总票价，已选座位数=已选座位数组的长度，总票价=当前所选电影的票价*已选座位数，并映射到相应元素中
//对电影下拉框事件监听，票价=当前所选电影的票价，并调用更新座位和总票价的函数，这样就会根据选择电影的变化而变化
//获取所有已选座位、已选电影的索引值，存储到localStorage中
//调用本地数据并渲染


//获取项目会用到的节点
const container=document.querySelector('.container');

//获取座位中类名是seat,且排除到已选座位的元素
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;//将字符串转为数值



populateUI();

//更新已选座位数及总票价
function updateSelectedCount(){
      //获取所有已选座位的元素
      const selectedSeats=document.querySelectorAll('.row .seat.selected');
      //用展开运算和map的方法去查看已选座位的下标
      const seatsIndex=[...selectedSeats]
      //在所有可选座位中已选座位的索引
      .map(item=>[...seats].indexOf(item));

      //本地存储
      localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex));


      const selectedSeatsCount=selectedSeats.length
      count.innerText=selectedSeatsCount
      total.innerText=selectedSeatsCount*ticketPrice
}


//保存电影索引值和票价
function setMovieData(movieIndex,moviePrice){
      localStorage.setItem("selectedMovieIndex",movieIndex);
      localStorage.setItem("selectedMoviePrice",moviePrice);

}


//获取本地数据并渲染样式
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')
      if(selectedMovieIndex!==null){
            movieSelect.selectedIndex=selectedMovieIndex;
      }
}




//电影下拉框的事件监听
movieSelect.addEventListener('change',e=>{
      //票价=切换电影的票价
      ticketPrice=+e.target.value;
      setMovieData(e.target.selectedIndex,e.target.value)
      //当切换电影的时候总票价和已选座位数也随之更新
      updateSelectedCount()
})


//座位点击事件，在座位的父元素container上做事件监听
//这样就能获取每一个点击的元素
container.addEventListener('click',e=>{
      //如果点击的元素的类名包含seat，且不包含"不可选"的类名
      if(e.target.classList.contains('seat') && 
      !e.target.classList.contains('occupied')){
            e.target.classList.toggle('selected');
            updateSelectedCount();
      }
})

//设置初始座位和总票价
updateSelectedCount();
//***********************************************************************************************


//3事件监听**************************************************************************************************
//3.1电影下拉框的事件监听:根据选择电影下拉框来更新已选数和总票价
movieSelect.addEventListener('change',e=>{
    ticketPrice=+e.target.value;
    setMovieData(e.target.selectedIndex,e.target.value)
    updateSelectedCount()
})

//3.2座位点击事件监听：当点击可选座位时，让颜色切换成已选状态
//container是整个座位部分，对container监听，当点击container的任何元素的时候，就会返回该dom元素
//(e) => {}  , 其实就是function (e){} 的缩写，
//如：（e）=> {x+y}  ,就相当于是 function (e){  return (x+y) }
//e.target，事件会冒泡，this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素
container.addEventListener('click',e=>{
    // console.log(e.target);//打印出点击的目标的dom元素
    if(e.target.classList.contains('seat') && !e.target.classList.contains('occupied')
        //classList.contains元素的类名是否包含
        //返回元素的类名，是否包含seat元素且不剔除掉不可选的座位
    ){
        e.target.classList.toggle('selected')//toggle:点击行为，转换，当选中的时候切换为已选状态，再点击转换为可选状态
        updateSelectedCount();
    }
})

//3.3设置初始座位和总票价
updateSelectedCount()
//************************************************************************************************