前端项目 电影院选座付款系统 【原生 JS 实现 页面美观简洁】

已于 2022-04-26 10:34:34 修改
阅读量7.3k 收藏 115
点赞数 72
分类专栏： 30天拿下前端必经之路 jQuery JavaScript 零基础入门 文章标签： 前端 开发语言 html css3 javascript
于 2022-04-11 17:13:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52212950/article/details/124102212
版权
这是一个使用纯JavaScript编写的电影院选座系统，涵盖了3号厅的选座、包场、清空已选座位及页面跳转功能。系统采用两种座位价格，22元和23元，支持全选和清除操作。点击支付后，价格会通过localStorage传递到付款页面，用户可以选择三种支付方式。项目展示了详细的代码分析和页面效果。
摘要由CSDN通过智能技术生成

       本篇文章写的是一个电影院的选座与页面跳转系统，因为时间仓促，只写了 3号厅的选座系统，后期有时间会写一个完整的功能更完备的电影院系统。

       本项目完全使用原生JS实现，共有下列功能：两种座位价格 22 元 和 23元，包场功能，清空已选座位功能，点击支付后会将总价格传入付款界面，数据在页面间传递使用的是 JS 的本地存储 .......

文章目录：

 效果展示：

主页面：

选座页面：

 开始选座：

 包场：

 页面跳转：

 代码分析：第一个页面（选座界面）

第一个页面获取到的元素：

两个价位座位的点击事件：

全选按钮的点击全选事件：

清除按钮的清除已选事件：

支付按钮的支付提交事件：

关闭按钮与选座按钮的点击事件：

 代码分析：第二个页面（付款界面）

第二个页面的元素获取：

获取第一个页面传来的价格：

点击付款方式切换二维码：

返回第一个页面：

选座界面完整代码：

付款界面完整代码：

效果展示：

主页面：

选座页面：

点击选座后即可弹出选座框进入选座

 开始选座：

座位价格分为两种，红色的为 22元，黑色的为 32元，选择后支付按钮会变为对应价格，点击清除按钮后会将已选座位清除，也可以点击选过的位置来清除某个座位

 包场：

点击包场按钮后会选上所有的座位，再点即可取消全选，点击清除按钮后会将已选座位清除

 页面跳转：

点击支付后会等待五秒再进入付款界面，方便人们打开手机准备好付款，更加人性化的设计往往更能融入社会

 五秒后便会跳转到第二个付款页面，并且要支付的价格会传入这个页面（ localStroage ），此页面也可以点击返回返回到首页，这个页面还可以进行三种支付方式的点击切换，更能融入更多人

 以上就是此案例的全部页面展示

 代码分析：第一个页面（选座界面）

第一个页面获取到的元素：

      var set22=document.querySelector('.set').querySelectorAll('.price22');  //22元的座位
      var set32=document.querySelector('.set').querySelectorAll('.price32');  //32元的座位
      var btn_buy=document.querySelector('.buy'); //支付按钮
      var btn_all=document.querySelector('.all'); //全选按钮
      var btn_clear=document.querySelector('.clear');  //清除按钮
      var btn_close=document.querySelector('.close');  //关闭按钮
      var outbox=document.querySelector('.outbox')  //获取到整个大盒子，包括选座框和关闭按钮
      var a=document.querySelector('a');  //跳转的页面链接
      var mask=document.querySelector('.mask');  //遮盖层（点击后半透明度遮盖全页面）
      var btn_select=document.querySelector('.select');   //首页选择按钮

两个价位座位的点击事件：

for(var i=0;i<set22.length;i++){   //22元座位
        set22[i].addEventListener('click',function(){
          if(this.innerHTML!='✔'){
            this.style.backgroundColor='rgb(255, 169, 83)'
            this.innerHTML='✔'
            num22++;
          }else if(this.innerHTML='✔'){
            this.style.backgroundColor='';
            this.innerHTML='';
            num22--;
          }
           if(num22+num32>0){
            nums=num22+num32
            price=num22*22+num32*32
            btn_buy.innerHTML='您已选择了'+ nums +'个座位，共'+ price +'元'
            btn_buy.className='buy current'
           }
           else if(num22+num32==0){
            btn_buy.innerHTML='支付'
          }
        })
      }
      for(var i=0;i<set32.length;i++){   //32元座位
        set32[i].addEventListener('click',function(){
          if(this.innerHTML!='✔'){
            this.style.backgroundColor='rgb(255, 169, 83)'
            this.innerHTML='✔'
            num32++;
          }else if(this.innerHTML='✔'){
            this.style.backgroundColor='';
            this.innerHTML='';
            num32--;
          }
          if(num22+num32>0){
            nums=num22+num32
            price=num22*22+num32*32
            btn_buy.innerHTML='您已选择了'+ nums +'个座位，共'+price+'元'
            btn_buy.className='buy current'
          }
          else if(num22+num32==0){
            btn_buy.innerHTML='支付'
          }
        })
      }

全选按钮的点击全选事件：

flag=0
      btn_all.addEventListener('click',function(){
        if(flag==0){
          for(var i=0;i<set22.length;i++){
           set22[i].style.backgroundColor='rgb(255, 169, 83)'
           set22[i].innerHTML='✔'
           num22=set22.length;
         }
         for(var i=0;i<set32.length;i++){
           set32[i].style.backgroundColor='rgb(255, 169, 83)'
           set32[i].innerHTML='✔'
           num32=set32.length;
         }
         price=parseInt(set22.length)*22+parseInt(set32.length)*32
         btn_buy.innerHTML='您选择了包场，共'+price+'元'
         btn_buy.className='buy current'
         flag=1
        }else if(flag==1){
          for(var i=0;i<set22.length;i++){
           set22[i].style.backgroundColor=''
           set22[i].innerHTML=''
           num22=0
           num32=0
         }
          for(var i=0;i<set32.length;i++){
           set32[i].style.backgroundColor=''
           set32[i].innerHTML=''
         }
         btn_buy.innerHTML='支付'
         flag=0;
        }
      })

清除按钮的清除已选事件：

 btn_clear.addEventListener('click',function(){
        for(var i=0;i<set22.length;i++){
          if(set22[i].innerHTML=='✔'){
            set22[i].style.backgroundColor=''
            set22[i].innerHTML=''
            num22=0
          }
        }
        for(var i=0;i<set32.length;i++){
          if(set32[i].innerHTML=='✔'){
            set32[i].style.backgroundColor=''
            set32[i].innerHTML=''
            num32=0
          }
        }
        btn_buy.innerHTML='支付'
      })

支付按钮的支付提交事件：

btn_buy.addEventListener('click',function(){
        btn_buy.disabled='true'
        if(num22+num32>0){
          var time=5
          var timer=window.setInterval(function(){
          if(time==0){
            clearInterval(timer)
            btn_buy.innerHTML='支付'
            time=5
            for(var i=0;i<set22.length;i++){
               if(set22[i].innerHTML=='✔'){
                 set22[i].style.backgroundColor=''
                 set22[i].innerHTML=''
                 num22=0
               }
             }
             for(var i=0;i<set32.length;i++){
               if(set32[i].innerHTML=='✔'){
                 set32[i].style.backgroundColor=''
                 set32[i].innerHTML=''
                 num32=0
               }
             }
             a.click();
          }else{
            btn_buy.innerHTML=time +'秒后进入付款页面'
            time--;
          }
        },1000)
        window.localStorage.setItem('price3',price)
        }
      })

关闭按钮与选座按钮的点击事件：

btn_close.addEventListener('click',function(){
        btn_close.click()
          outbox.style.display='none'
          mask.style.display='none'
      })
      btn_select.addEventListener('click',function(){
        outbox.style.display='block'
        mask.style.display='block'
      })

 代码分析：第二个页面（付款界面）

第二个页面的元素获取：

        var jiaqian=document.querySelector('.jiaqian');  //价格显示的位置
        var btns=document.querySelectorAll('button')    //三个付款方式按钮
        var lis=document.querySelectorAll('li')   //三个付款码图片
        var btn_fanhui=document.querySelector('.fanhui')  //返回键
        var a=document.querySelector('a')    //跳转至第一个页面

获取第一个页面传来的价格：

使用了 localStorage 本地存储

price=window.localStorage.getItem('price3')

点击付款方式切换二维码：

使用 自定义属性

for(var i=0;i<btns.length;i++){
            btns[i].setAttribute('index',i)
            btns[i].addEventListener('click',function(){
                var index=this.getAttribute('index');
                 for(var i=0;i<lis.length;i++){
                     lis[i].style.display='none'
                 }
                 lis[index].style.display='block'
            })
        }

返回第一个页面：

 btn_fanhui.addEventListener('click',function(){
            a.click()
        })

选座界面完整代码：

( 图片请自己添加 ! ! ! )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影票选座页面</title>
  <style>
      *{
        padding: 0;
        margin: 0;
      }
      body{
        background: url(./phpto/6de4e89f2aa46710b597bdb6d2dafa4c.jpg) no-repeat;
      }
      .outbox{
        display: none;
        position: absolute;
        top: 35px;
        left: 415px;
      }
      .bigbox{
        box-sizing: border-box;
        width: 600px;
        height: 700px;
        background-color: rgb(213, 213, 213);
        margin: 50px auto;
        padding: 25px;
        border: 1.5px solid;
      }
      .head{
         box-sizing: border-box;
         width: 550px;
         height: 70px;
         background-color: rgb(98, 176, 255);
         color: rgb(255, 255, 255);
         text-align: center;
         text-shadow: 1px 1px 1px black;
         line-height: 70px;
         font-size: 35px;
         font-weight: bold;
         border-top: 1.5px solid black;
         border-left: 1.5px solid black;
         border-right: 1.5px solid black;
      }
      .information{
        box-sizing: border-box;
        width: 550px;
        height: 50px;
        background-color: rgb(253, 253, 253);
        padding: 17px;
        border-bottom: 1px solid;
        border-left: 1.5px solid;
        border-right: 1.5px solid;
      }
      .information p{
        float: left;
        margin-right: 11px;
      }
      .info-set1{
        float: left;
        box-sizing: border-box;
        width: 15px;
        height: 15px;
        border: 1px solid red;
        margin-right: 5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        background-color: rgb(235, 235, 235);

      }
      .info-set2{
        float: left;
        box-sizing: border-box;
        width: 15px;
        height: 15px;
        border: 1px solid ;
        margin-right: 5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        background-color: rgb(235, 235, 235);
      }
      .info-set3{
        float: left;
        box-sizing: border-box;
        width: 15px;
        height: 15px;
        border: 1px solid red;
        margin-right: 5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        background-color: rgb(255, 133, 33);
        font-size: 10px;
        text-align: center;
        line-height: 15px;
        color: rgb(255, 255, 255);
      }
      .set{
        box-sizing: border-box;
        width: 550px;
        height: 430px;
        background-color: rgb(255, 255, 255);
        margin-bottom: 20px;
        padding-top: 80px;
        border-left: 1.5px solid;
        border-right: 1.5px solid;
        border-bottom: 1.5px solid;
      }
      .buttons{
        width: 550px;
        height: 80px;
        background-color: rgb(213, 213, 213);
      }
    
      ul{
        width: 550px;
        box-sizing: border-box;
      }
      ul li{
        box-sizing: border-box;
        float: left;
        width: 30px;
        height: 30px;
        margin: 10px;
        list-style: none;
        border: 1.4px solid;
        background-color: rgb(235, 235, 235);
        -webkit-border-radius:7px;
        -moz-border-radius:7px;
        cursor: pointer;
        text-align: center;
        line-height: 30px;
        color: rgb(255, 255, 255);
        font-size: 15px;
        border: 1.4px solid black;
      }
      .price22{
        box-sizing: border-box;
        float: left;
        width: 30px;
        height: 30px;
        margin: 10px;
        list-style: none;
        border: 1.4px solid red;
        background-color: rgb(235, 235, 235);
        -webkit-border-radius:7px;
        -moz-border-radius:7px;
        cursor: pointer;
      }
      li:hover{
        background-color: rgb(177, 177, 177);
      }
      .buttons{
        box-sizing: border-box;
        padding-top: 7px;
      }
      .clear{
         width: 130px;
         height: 70px;
         margin-right: 15px;
         -webkit-border-radius:16px;
        -moz-border-radius:16px;
        border: 2px solid rgb(70, 70, 70);
        background-color: rgb(165, 165, 165);
        text-align: center;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 2px rgb(61, 61, 61);
      }
      .clear:hover{
        background-color: rgb(210, 210, 210);
      }
      .all{
         width: 130px;
         height: 70px;
         margin-right: 15px;
         -webkit-border-radius:16px;
        -moz-border-radius:16px;
        border: 2px solid rgb(70, 70, 70);
        background-color: rgb(165, 165, 165);
        text-align: center;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 2px rgb(67, 67, 67);
      }
      .all:hover{
        background-color: rgb(210, 210, 210);
      }
      .buy{
         width: 250px;
         height: 70px;
         -webkit-border-radius:16px;
        -moz-border-radius:16px;
        border: 2px solid rgb(70, 70, 70);
        background-color: rgb(255, 169, 83);
        text-align: center;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 2px rgb(60, 60, 60);
      }
      .buy:hover{
        background-color: rgb(201, 27, 27);
      }
      .current{
        font-size: 16.2px;
      }
      .close{
        box-sizing: border-box;
        position: absolute;
        top: 55px;
        right: -22px;
        width: 20px;
        height: 20px;
        border: 1.4px solid;
        text-align: center;
        line-height: 13px;
        background-color: #fff;
        font-size: 25px;
        cursor: pointer;
      }
      .close:hover{
        background-color: rgb(255, 235, 235);
      }
      .index{
        box-sizing: border-box;
        width: 800px;
        height: 200px;
        margin: 200px auto;
        text-align: center;
        line-height: 200px;
        font-size: 55px;
        font-weight: bold;
        text-shadow: 3px 3px 3px rgb(255, 255, 255);
      }
      .select{
        position: absolute;
        left: 450px;
        top: 460px;
        width: 550px;
        height: 130px;
        display: inline-block;
        -webkit-border-radius:56px;
        -moz-border-radius:56px;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        background-color: rgb(255, 171, 75);
        border: 2px solid gray;
        color: #fff;
        text-shadow: 3px 3px 3px black;
      }
      .select:hover{
        background-color: rgb(128, 128, 128);
        border: 2px solid rgb(0, 0, 0);
      }
      .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 1440px;
        height: 849px;
        background-color: rgba(0, 0, 0, 0.506);
        display: none;
      }
  </style>
  <script src="./jQuery.js"></script>
</head>
<body>
  <div class="index">欢迎您光顾万达影城三号厅</div>
  <button class="select">选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;座</button>
  
  <div class="mask"></div>

  <div class="outbox">
    <div class="close">x</div>
   <div class="bigbox">
      <div class="head">万达影城    3号厅</div>
      <div class="information">
        <div class="info-set1"></div>
        <p>22元</p>
        <div class="info-set2"></div>
        <p>32元</p>
        <div class="info-set3">✔</div>
        <p>已选</p>
      </div>
      <div class="set">
        <ul>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price22"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
          <li class="price32"></li>
        </ul>
      </div>
      <div class="buttons">
        <button class="clear">清空已选</button>
        <button class="all">包场</button>
        <!-- <form action="./buy.html" style="display: inline-block;"> -->
          <button class="buy" name="price" value=111>支付</button>
        <!-- </form> -->
      </div>
   </div>
  </div>
   <a href="./buy.html"></a>
    <script>
      num22=0;
      num32=0;
      price=0;
      var set22=document.querySelector('.set').querySelectorAll('.price22');
      var set32=document.querySelector('.set').querySelectorAll('.price32');
      var btn_buy=document.querySelector('.buy');
      var btn_all=document.querySelector('.all');
      var btn_clear=document.querySelector('.clear');
      var btn_close=document.querySelector('.close');
      var outbox=document.querySelector('.outbox')
      var a=document.querySelector('a');
      var mask=document.querySelector('.mask');
      var btn_select=document.querySelector('.select');
      for(var i=0;i<set22.length;i++){
        set22[i].addEventListener('click',function(){
          if(this.innerHTML!='✔'){
            this.style.backgroundColor='rgb(255, 169, 83)'
            this.innerHTML='✔'
            num22++;
          }else if(this.innerHTML='✔'){
            this.style.backgroundColor='';
            this.innerHTML='';
            num22--;
          }
           if(num22+num32>0){
            nums=num22+num32
            price=num22*22+num32*32
            btn_buy.innerHTML='您已选择了'+ nums +'个座位，共'+ price +'元'
            btn_buy.className='buy current'
           }
           else if(num22+num32==0){
            btn_buy.innerHTML='支付'
          }
        })
      }
      for(var i=0;i<set32.length;i++){
        set32[i].addEventListener('click',function(){
          if(this.innerHTML!='✔'){
            this.style.backgroundColor='rgb(255, 169, 83)'
            this.innerHTML='✔'
            num32++;
          }else if(this.innerHTML='✔'){
            this.style.backgroundColor='';
            this.innerHTML='';
            num32--;
          }
          if(num22+num32>0){
            nums=num22+num32
            price=num22*22+num32*32
            btn_buy.innerHTML='您已选择了'+ nums +'个座位，共'+price+'元'
            btn_buy.className='buy current'
          }
          else if(num22+num32==0){
            btn_buy.innerHTML='支付'
          }
        })
      }
      flag=0
      btn_all.addEventListener('click',function(){
        if(flag==0){
          for(var i=0;i<set22.length;i++){
           set22[i].style.backgroundColor='rgb(255, 169, 83)'
           set22[i].innerHTML='✔'
           num22=set22.length;
         }
         for(var i=0;i<set32.length;i++){
           set32[i].style.backgroundColor='rgb(255, 169, 83)'
           set32[i].innerHTML='✔'
           num32=set32.length;
         }
         price=parseInt(set22.length)*22+parseInt(set32.length)*32
         btn_buy.innerHTML='您选择了包场，共'+price+'元'
         btn_buy.className='buy current'
         flag=1
        }else if(flag==1){
          for(var i=0;i<set22.length;i++){
           set22[i].style.backgroundColor=''
           set22[i].innerHTML=''
           num22=0
           num32=0
         }
          for(var i=0;i<set32.length;i++){
           set32[i].style.backgroundColor=''
           set32[i].innerHTML=''
         }
         btn_buy.innerHTML='支付'
         flag=0;
        }
      })
      
      btn_clear.addEventListener('click',function(){
        for(var i=0;i<set22.length;i++){
          if(set22[i].innerHTML=='✔'){
            set22[i].style.backgroundColor=''
            set22[i].innerHTML=''
            num22=0
          }
        }
        for(var i=0;i<set32.length;i++){
          if(set32[i].innerHTML=='✔'){
            set32[i].style.backgroundColor=''
            set32[i].innerHTML=''
            num32=0
          }
        }
        btn_buy.innerHTML='支付'
      })

      btn_buy.addEventListener('click',function(){
        btn_buy.disabled='true'
        if(num22+num32>0){
          var time=5
          var timer=window.setInterval(function(){
          if(time==0){
            clearInterval(timer)
            btn_buy.innerHTML='支付'
            time=5
            for(var i=0;i<set22.length;i++){
               if(set22[i].innerHTML=='✔'){
                 set22[i].style.backgroundColor=''
                 set22[i].innerHTML=''
                 num22=0
               }
             }
             for(var i=0;i<set32.length;i++){
               if(set32[i].innerHTML=='✔'){
                 set32[i].style.backgroundColor=''
                 set32[i].innerHTML=''
                 num32=0
               }
             }
             a.click();
          }else{
            btn_buy.innerHTML=time +'秒后进入付款页面'
            time--;
          }
        },1000)
        window.localStorage.setItem('price3',price)
        }
      })

      btn_close.addEventListener('click',function(){
        btn_close.click()
          outbox.style.display='none'
          mask.style.display='none'
      })
      btn_select.addEventListener('click',function(){
        outbox.style.display='block'
        mask.style.display='block'
      })
    </script>
</body>
</html>

付款界面完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影票支付</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
        background-color: rgb(178, 178, 178);
        background: url(./phpto/6de4e89f2aa46710b597bdb6d2dafa4c.jpg) no-repeat;
      }
        .box{
        box-sizing: border-box;
        width: 800px;
        height: 450px;
        background-color: rgb(213, 213, 213);
        margin: 160px auto;
        padding: 20px;
        padding-right: 10px;
        border: 1.6px solid;
        }
        .left{
            box-sizing: border-box;
            float: left;
            width: 250px;
            height: 410px;
            background-color: rgb(173, 172, 172);
            margin-right: 20px;
            text-align: center;
            padding-top: 140px;
           line-height: 50px;
           font-size: 25px;
           font-weight: bold;
           color: rgb(255, 255, 255);
           text-shadow: 2px 2px 2px black;
        }
        .jiaqian{
            font-size: 40px;
           font-weight: bold;
           color: rgb(255, 255, 255);
           text-shadow: 2px 2px 2px black;
           color: rgb(255, 144, 74);
        }
        .center{
            box-sizing: border-box;
            float: left;
            width: 410px;
            height: 410px;
            background-color: #fff;
            margin-right: 2px;
        }
        .right{
            box-sizing: border-box;
            float: left;
            width: 80px;
            height: 410px;
            background-color: rgb(255, 168, 168);
        }
        .btn1{
            width: 80px;
            height: 137px;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 2px 2px 2px black;
            color: rgb(255, 255, 255);
            background-color: rgb(91, 157, 255);
        }
        .btn1:hover{
            background-color: rgb(35, 103, 205);
        }
        .btn2{
            width: 80px;
            height: 137px;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 2px 2px 2px black;
            color: rgb(255, 255, 255);
            background-color: rgb(0, 220, 7);
        }
        .btn2:hover{
            background-color: rgb(0, 150, 5);
        }
        .btn3{
            width: 80px;
            height: 137px;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 2px 2px 2px black;
            color: rgb(255, 255, 255);
            background-color: rgb(255, 98, 98);
        }
        .btn3:hover{
            background-color: rgb(190, 2, 2);
        }
        ul{
            box-sizing: border-box;
            width: 410px;
        }
        li{
            box-sizing: border-box;
            width: 410px;
            height: 410px;
            list-style: none;
            display: none;
        }
        img{
            box-sizing: border-box;
            width: 410px;
            height: 410px;
            border: 1.4px solid;
        }
        .fanhui{
        position: absolute;
        left: 550px;
        top: 630px;
        width: 300px;
        height: 70px;
        display: inline-block;
        -webkit-border-radius:46px;
        -moz-border-radius:46px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        background-color: rgb(255, 171, 75);
        border: 2px solid gray;
        color: #fff;
        text-shadow: 3px 3px 3px black;
      }
      .fanhui:hover{
        background-color: rgb(128, 128, 128);
        border: 2px solid rgb(0, 0, 0);
      }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <p>感谢您的购买</p>
           <p style="display: inline-block;">请您支付&nbsp; </p><p class="jiaqian" style="display: inline-block;"></p><p style="display: inline-block;">&nbsp;元</p>
        </div>
        <div class="center">
            <ul>
                <li style="display: block;">
                    <img src="./phpto/支付宝 (2).jpg" alt="" >
                </li>
                <li>
                    <img src="./phpto/微信.jpg" alt="">
                </li>
                <li>
                    <img src="./phpto/银行卡.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="right">
            <button class="btn1">支付宝</button>
            <button class="btn2">微信</button>
            <button class="btn3">银行卡</button>
        </div>
    </div>
    <button class="fanhui">返回</button>
    <a href="./index.html"></a>
    <script>
        var jiaqian=document.querySelector('.jiaqian');
        var btns=document.querySelectorAll('button')
        var lis=document.querySelectorAll('li')
        var btn_fanhui=document.querySelector('.fanhui') 
        var a=document.querySelector('a')       
        price=window.localStorage.getItem('price3')
        jiaqian.innerHTML=price
        for(var i=0;i<btns.length;i++){
            btns[i].setAttribute('index',i)
            btns[i].addEventListener('click',function(){
                var index=this.getAttribute('index');
                 for(var i=0;i<lis.length;i++){
                     lis[i].style.display='none'
                 }
                 lis[index].style.display='block'
            })
        }
        btn_fanhui.addEventListener('click',function(){
            a.click()
        })
    </script>
</body>
</html>

卡卡西最近怎么样
关注
专栏目录
JS实现电影院选座位
m0_63466615的博客
11-06 8345
效果图 1.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style/index.css"> <script type="text/javascript" src="js/
jQuery在线选座订座（影院篇）
Helloweba
11-15 2595
我们在线购票时（如电影票、车票等）可以自己选座。开发者会在页面上列出座次席位，用户可以一目了然的看到可以选择的座位及支付。本文以电影院购票为例，为您展示如何选座、处理选座数据等。 在这里，我给大家介绍一款基于jQuery的在线选座插件：jQuery Seat Charts，它支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制座位。 HTML 我们假设进
【有源码】基于SpringBoot+Vue的电影院选座售票系统的设计与实现
最新发布
qq_2105837402的博客
08-18 867
电影院选座售票系统的设计内容涵盖了全面的功能模块和用户交互界面。前端使用Vue.js构建，提供了直观的用户界面，用户可以方便地查看电影资讯、挑选座位、进行票务购买、提交评价以及收藏点赞影片。后端基于Spring Boot，负责处理复杂的业务逻辑和数据管理，包括用户信息管理、影片和影院信息管理、订单处理、评论回复等。系统设计还涉及到数据的高效存储与检索、安全性保障以及用户权限控制，确保系统在处理大量用户请求时能够保持稳定和安全。
在线电影院购票系统（源码！基于jsp+js+sqlserver适合初学者）
06-13
在线电影院购票系统（源码！基于jsp+js+sqlserver适合初学者）对于刚学习jsp的初学者帮助比较大，里面涉及jsp的知识比较全面,系统功能还没有完善，留给学者自己发挥！有问题可留言！
电影院选座管理 源码
01-10
影院在线选座的座位图实现 首先感谢的GitHub项目： 多点缩放移动：https://github.com/Almeros/android-gesture-detectors SelectSeatView：https://github.com/twl8023/SelectSeatView/ 功能： 1. 显示座位图 2. 可缩放 3. 可移动 4. 可选座 5. 左侧显示座位排号 6. 中间线 7. 只绘制可见的座位图 8. todo for 缩放比率
前端小案例——购买电影票（HTML+CSS+JS, 附源码）
前端小白一枚
02-17 2399
这段代码实现了一个简单的电影票选座购买的功能界面。在页面上展示了一个电影院的座位布局，以及右侧显示了电影信息、选座情况、票价、总计等内容。用户可以通过点击座位来选择购买电影票，每个座位的状态会在点击时改变（从默认颜色变为红色），并在右侧显示已选座位的信息。用户可以确认购买，确认购买后会出现购买成功的提示，并且页面会重置，清空已选座位和右侧信息。
原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件
01-21
使用原生JS代码开发一个前端框架，框架名称SYSUI，纯原生js开发，不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发，也支持配置后台系统界面，是个多用途的框架。 使用SYSUI开发一个后台管理系统界面，支持...
原生JS经典小项目-电影选座
05-18
在本项目"原生JS经典小项目-电影选座"中，我们将探讨如何利用JavaScript、HTML和CSS构建一个模拟电影院座位选择的互动界面。这个项目旨在帮助开发者提升对前端技术的掌握，特别是JavaScript的动态交互功能。 首先，...
前端原生js实现MD5加密
08-28
前端原生js实现MD5加密
html css 原生js实现动态京东页面
12-24
在本项目中，我们将深入探讨如何使用HTML、CSS和原生JavaScript来实现一个动态的京东页面，这个页面包含了丰富的交互功能，如轮播图、自动轮播、倒计时（适用于秒杀模块）以及点击切换等特性。这些技术是前端开发的...
原生js验证简洁注册登录页面
10-20
另外，页面中嵌入了CSS样式表`css/common_form.css`来实现页面的样式设计，使得页面简洁美观。 ### 2. 原生JavaScript表单验证 JavaScript验证是通过在HTML中嵌入JavaScript代码或者引用外部JavaScript文件来实现...
jquery实现电影院座位自助选择功能在线选座订座
02-20
query 电影院座位自助选择功能在线选座订座插件 /jquery 电影院座位自助选择功能在线选座订座插件/26673 /jquery 电影院座位自助选择功能在线选座订座插件/26673/css /jquery 电影院座位自助选择功能在线选座订座插件/26673/css/jq22.css /jquery 电影院座位自助选择功能在线选座订座插件/26673/images /jquery 电影院座位自助选择功能在线选座订座插件/26673/images/demo.jpg /jquery 电影院座位自助选择功能在线选座订座插件/26673/index.html /jquery 电影院座位自助选择功能在线选座订座插件/26673/jquery.seat-charts.min.js
电影院选座
01-14
MVC，电影院在线选座，使用的是ASP.net开发语言，mvc技术构建的电影院可在线选座
电影院选座系统
06-16
初学者做的没有图形界面，有些代码可供参考，请看好在下载
jQuery在线选座(影院版)
04-02
jquery.seat-charts是一款适合电影票、高铁票的在线选座插件,支持自定义样式，支持设置座位状态，并且支持键盘控制座位。 接下来我们定义好票价、座位区、票数、总计金额等，然后调用插件生成座位区：$('#seat-map').seatCharts()。 更多详细教程 jQuery在线选座(影院版) 素材火教程：http://www.sucaihuo.com/js/5.html，值得一提的是，还有演示效果和文件打包下载哦！
电影选座系统，挺简单的适合新手看
04-17
电影选座系统，挺简单的适合新手看
JavaWeb电影院订票系统(支持在线选座)
热门推荐
pengxiang1998的博客
03-08 2万+
今天，博主开发一款电影院购票系统，说到影院购票系统，其与普通的商城系统的差别主要就是要进行座位选择，保证观众选取完该座位后会在订单在显示相应的信息，同时，选过的座位不能再选。 博主考虑一下，觉得座位选座可以通过JavaScript与JQuery等前端编程语言来实现，博主的前端技术不算太好，只能借用网上的js源码了。 展示视频 影院运行视频 功能点与技术点 前台： 用户注册登录，身.
ssm电影院订票系统 前端layui
m0_46108627的博客
07-20 2368
`影院购票系统,本项目分为前台和后台，用户有普通用户和管理员，普通用户只可访问前台页面，管理员可以访问后台；前台主要功能有电影分类、电影排行、电影详细介绍、选座购票、评论等功能；后台主要功能有用户管理、电影管理、订单管理、评论管理、标签管理、放映厅管理、场次安排等功能。提示以下是本篇文章正文内容，下面案例可供参考后端前端https//pan.baidu.com/s/1faYTolvh5EuA6erRgdyK_Q提取码asg7httpshttpshttpshttps。...
js电影院选座功能的实现
weixin_43894763的博客
06-14 6627
## 样式 <style> .item{ width: 500px; display: flex; justify-content: space-around; } .item>div{ width: 44px; height: 44px; line-height: 44px; .
评论 80
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡西最近怎么样

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值