js(Mandango:壮汉专用，电影院划位工具)

Mandango:壮汉专用，电影院划位工具

<body onload="initSeats();">
  <div style="margin-top:75px; text-align:center">
    <img id="seat0" src="" alt="" />
    <img id="seat1" src="" alt="" />
    <img id="seat2" src="" alt="" />
    <img id="seat3" src="" alt="" />
    <img id="seat4" src="" alt="" />
    <img id="seat5" src="" alt="" />
    <img id="seat6" src="" alt="" />
    <img id="seat7" src="" alt="" />
    <img id="seat8" src="" alt="" />
  </div>
</body>

1. 使用for循环寻找三个相邻空位的代码

2. 为Mandango程序创建seats数组，然后以循环处理该数组，使用alert框提出空位信息

1 var seats = [false, true, false, true, true, true, false, true, false];
2 for(var i = 0; i < seats.length; i++){
3   if(seats[i])
4     alert("Seat"+i+"is available");
5   else
6     alert("Seat" +i+"is not available")  
7 }

3. Mandango的座位状态于initSeats()函数里初始化，该函数使用把座位初始化的函数，负责把JavaScript数组映射到html的座位图像

function initSeats()  {
  for (var i = 0; i < seats.length; i++)  {
    if(seats[i]){
      document.getElementById("seat" + i).src = "seat_avail.png";
      document.getElementById("seat" + i).alt = "Available seat";
    }
    else  {
       document.getElementById("seat" + i).src = "seat_unavail.png";
       document.getElementById("seat" + i).src = "unavailable seat";
    }
  }
}

4. 变量selSeat存储座位的选择状态，可用特殊值只是尚未选择的状态，例如-1，尚未选择任何座位，所以变量selSeat一开始需要初始化为-1，组合findSeat()函数，这个函数将搜索座位数组，寻找空位，而后提醒用户接受或拒绝空位。

 1 function findSeat()  {
 2 // 如果座位全被选择了，重新初始化全部座位
 3   if(selSeat >= 0) {
 4     selSeat = -1;
 5     initSeats();
 6   }
 7 
 8 // 搜索全部有效的座位
 9   for(var i = 0; i < seats.length; i++){
10     if(seats[i]){
11       selSeat = i;
12       document.getElementById("seat"+i).src = "seat_select.png"；
13       // 确认用户是否接受座位
14      var accept = confirm("Seat" + (i+1) + "is available. Accept?");
15      if(accept){
           break;
         }
         else{
16        selSeat = -1;
17        document.getElementById("seat" + i).src = "seat_avail.png"
18      }
19     }
20   } 
21 }

5. 放大2-D的Mandango

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mandango</title>

    <script>
        window.onload=function(){
                     var seats=[[false,true, false, true, true, true, false,true, false],
                                [false,true, false, true, true, true, false,true, false],
                                [false,true, false, true, true, true, false,true, false],
                                [false,true, false, true, true, true, false,true, false]]

         var selSeat = -1;

         initSeats();
         document.getElementById("findSeats").onclick = findSeats;

         function initSeats(){
             for(var i = 0; i < seats.length; i++){
                 for(var j =0; j < seats[i].length; j++){
                     if (seats[i][j]) {
                         document.getElementById("seats" + (i * seats[i].length + j)).src = "seat_avail.png";
                     }else {
                         document.getElementById("seats" + (i * seats[i].length + j)).src = "seat_unavail.png"
                     }
                 }
             }
         }

         // 按下find seats开始寻找新座位，重新初始化座位状态
         function findSeats(){
             if (selSeat >= 0) {
                 selSeat = -1;
                 initSeats();
                 }
             // 寻找所有有效的座位
             var i = 0; finished = false;
             while(i < seats.length && !finished){
                 for(var j = 0; j < seats[i].length; j++)  {
                     if (seats[i][j] && seats[i][j+1] && seats[i][j+2]) {
                         selSeat = i * seats[i].length + j;
                         document.getElementById("seats" + (i * seats[i].length + j)).src = "seat_select.png";
                         document.getElementById("seats" + (i * seats[i].length + j)).alt = "Your seat";
                         document.getElementById("seats" + (i * seats[i].length + j+1)).src = "seat_select.png";
                         document.getElementById("seats" + (i * seats[i].length + j+1)).alt = "Your seat";
                         document.getElementById("seats" + (i * seats[i].length + j+2)).src = "seat_select.png";
                         document.getElementById("seats" + (i * seats[i].length + j+2)).alt = "Your seat";
                         // 确认用户是否选择座位
                         var accept = confirm("Seats" + (j+1) + "through" + (j+3) + "in Row" + (i+1) + "are available. Accept?");
                         if (accept) {
                             finished = true;
                             break;
                         }else {
                             // 用户拒绝选择座位，清空座位
                             selSeat = -1;
                             document.getElementById("seat" + (i * seats[i].length + j)).src = "seat_avail.png"
                             document.getElementById("seat" + (i * seats[i].length + j+1)).src = "seat_avail.png"
                             document.getElementById("seat" + (i * seats[i].length + j+2)).src = "seat_avail.png"
                         }
                     }
                 }
                 // 增加外部循环
                 i++;
                 }
             }        
        }
    </script>
</head>
<body>
     <div style="margin-top: 25px; text-align: center">
             <img src="" alt="" id="seat0">
             <img src="" alt="" id="seat1">
             <img src="" alt="" id="seat2">
             <img src="" alt="" id="seat3">
             <img src="" alt="" id="seat4">
             <img src="" alt="" id="seat5">
             <img src="" alt="" id="seat6">
             <img src="" alt="" id="seat7">
             <img src="" alt="" id="seat8"><br />
          <img src="" alt="" id="seat9">
             <img src="" alt="" id="seat10">
             <img src="" alt="" id="seat11">
             <img src="" alt="" id="seat12">
             <img src="" alt="" id="seat13">
             <img src="" alt="" id="seat14">
             <img src="" alt="" id="seat15">
             <img src="" alt="" id="seat16">
             <img src="" alt="" id="seat17"><br /> 





             
             <img src="" alt="" id="seat18">
             <img src="" alt="" id="seat19">
             <img src="" alt="" id="seat20">
             <img src="" alt="" id="seat21">
             <img src="" alt="" id="seat22">
             <img src="" alt="" id="seat23">
             <img src="" alt="" id="seat24">
             <img src="" alt="" id="seat25">
             <img src="" alt="" id="seat26"><br />
             <img src="" alt="" id="seat27">
             <img src="" alt="" id="seat28">
             <img src="" alt="" id="seat29">
             <img src="" alt="" id="seat30">
             <img src="" alt="" id="seat31">
             <img src="" alt="" id="seat32">
             <img src="" alt="" id="seat33">
             <img src="" alt="" id="seat34">
             <img src="" alt="" id="seat35"><br />    
            <input type="button" id="findSeats" value="Find Seats"">
     </div>
</body>
</html>

posted @ 2019-03-06 14:23 小虾米程序员阅读(565) 评论(0) 收藏举报

刷新页面返回顶部

小虾米博客

js(Mandango:壮汉专用，电影院划位工具)

公告