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

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

# 微信 2024-05-05 12:54 0 47 来源：云博客

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 else6 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="" id="seat0"> <img src="" id="seat1"> <img src="" id="seat2"> <img src="" id="seat3"> <img src="" id="seat4"> <img src="" id="seat5"> <img src="" id="seat6"> <img src="" id="seat7"> <img src="" id="seat8"><br /> <img src="" id="seat9"> <img src="" id="seat10"> <img src="" id="seat11"> <img src="" id="seat12"> <img src="" id="seat13"> <img src="" id="seat14"> <img src="" id="seat15"> <img src="" id="seat16"> <img src="" id="seat17"><br /> <img src="" id="seat18"> <img src="" id="seat19"> <img src="" id="seat20"> <img src="" id="seat21"> <img src="" id="seat22"> <img src="" id="seat23"> <img src="" id="seat24"> <img src="" id="seat25"> <img src="" id="seat26"><br /> <img src="" id="seat27"> <img src="" id="seat28"> <img src="" id="seat29"> <img src="" id="seat30"> <img src="" id="seat31"> <img src="" id="seat32"> <img src="" id="seat33"> <img src="" id="seat34"> <img src="" id="seat35"><br /> <input type="button" id="findSeats" value="Find Seats""> </div></body></html>