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>