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>js(Mandango:壮汉专用，电影院划位工具)
原文地址：https://www.cnblogs.com/olivia-xia/p/10479067.html