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框提出空位信息
var seats = [false, true, false, true, true, true, false, true, false];
for(var i = 0; i < seats.length; i++){
if(seats[i])
alert("Seat"+i+"is available");
else
alert("Seat" +i+"is not available")
}
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()函数， 这个函数将搜索座位数组， 寻找空位，而后提醒用户接受或拒绝空位。
function findSeat() {
// 如果座位全被选择了，重新初始化全部座位
if(selSeat >= 0) {
selSeat = -1;
initSeats();
}
// 搜索全部有效的座位
for(var i = 0; i < seats.length; i++){
if(seats[i]){
selSeat = i;
document.getElementById("seat"+i).src = "seat_select.png"；
// 确认用户是否接受座位
var accept = confirm("Seat" + (i+1) + "is available. Accept?");
if(accept){
break;
}
else{
selSeat = -1;
document.getElementById("seat" + i).src = "seat_avail.png"
}
}
}
}
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>
js(Mandango:壮汉专用，电影院划位工具)的更多相关文章
- node.js基础模块http、网页分析工具cherrio实现爬虫
node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言 说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...
- Node.js之包与npm包管理工具
Node.js之包与npm包管理工具 1.Node.js中的包 1.1在一个包中包含如下内容: package.json:对包进行描述 在bin子目录中存放二进制文件 在lib子目录中存放JavaSc ...
- npm 是node.js下带的一个包管理工具
npm 是node.js下带的一个包管理工具 npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...
- js如何判断小数点后有几位
<script> var n=3.143423423;alert(n.toString().split(".")[1].length); </script> ...
- js实现去文本换行符小工具
js实现去文本换行符小工具 一.总结 一句话总结: 1.vertical属性使用的时候注意看清定义,也注意父元素的基准线问题.vertical-align:top; 2.获取textareaEleme ...
- js 让小数四舍五入保留两位小数的函数是？
js 让小数四舍五入保留两位小数的函数是? 例子:data.relations[i].data[j].toFixed(2) toFixed(2)这个函数就是保留两位小数的作用
- 【一统江湖的大前端（9）】TensorFlow.js 开箱即用的深度学习工具
示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...
- JS文档和Demo自动化生成工具 - SmartDoc发布
曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...
- JS内存泄漏 和Chrome 内存分析工具简介（摘）
原文地址:http://web.jobbole.com/88463/ JavaScript 中 4 种常见的内存泄露陷阱 原文:Sebastián Peyrott 译文:伯乐在线专栏作者 - AR ...
随机推荐
- python之UnittTest模块
一. UnitTest单元测试框架 1.1概述 unittest原名为PyUnit,是由java的JUnit衍生而来.单元测试是对程序中最小的可测试模块(函数)来进行测试:对于单元测试,需要设置预先条 ...
- mysql进阶练习
一 . MySQL进阶练习 /*==========================创建班级表=============================*/ CREATE TABLE class ( ...
- PART 5: INTEGRATING SPRING SECURITY WITH SPRING BOOT WEB
转自:http://justinrodenbostel.com/2014/05/30/part-5-integrating-spring-security-with-spring-boot-web/ ...
- 修改默认input（file）的样式
以上是默认的 <input type="file" > 但是丑爆了啊同志们~~长久以来都是调用大神的代码,今天我也小试牛刀,做出了如下效果: 这样还是能接受的样子啦~ ...
- [poj 3539] Elevator (同余类bfs)
Description Edward works as an engineer for Non-trivial Elevators: Engineering, Research and Constru ...
- C/C++ 获取文件夹下的所有文件列表
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51009608 提供一段C/C++代码示 ...
- HDU5926 Mr. Frog’s Game
/* HDU5926 Mr. Frog’s Game http://acm.hdu.edu.cn/showproblem.php?pid=5926 杂题水题 * */ #include <cst ...
- poj 3259 Wormholes 【SPFA&&推断负环】
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 36852 Accepted: 13502 Descr ...
- js保留两位小数的解决的方法
var a = 123.456; a = a..toFixed(2); alert(a);//结果:123.46
- Beginning Python From Novice to Professional (9) － Socket
Socket 小型server: #!/usr/bin/env python import socket s = socket.socket() host = socket.gethostname() ...