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>