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 ...
随机推荐
- 原生ajax的get和post方法封装
get 方法 function serialize (data) { if (!data) { return ''; } var paris = []; for (var key in data) { ...
- UVA10340 - All in All（紫书习题3.9）
输入两个字符串s和t,判断是否可以从t中删除0个或者多个字符(其他字符顺序不变),得到字符串s.例如,abcde可以得到bce,但无法得到cb. Input 输入多组数据 每组一行包含两个字符串s和t ...
- Linux中的gpio口使用方法
Linux中的IO使用方法 应该是新版本内核才有的方法.请参考:./Documentation/gpio.txt文件 提供的API:驱动需要包含 #include <linux/gpio.h&g ...
- js实现本地的图片压缩上传预览
js在设计时考虑到安全的原因是不允许读写本地文件的,随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能, 另外在移动端有的限制图片大小的需求,主要是考虑图片过大会 ...
- G - Arctic Network
G - Arctic Network #include<cmath> #include<cstdio> #include<cstring> #include&l ...
- Java - 经常使用函数Random函数
http://blog.csdn.net/pipisorry/article/details/44411541 Random()函数生成随机数 java.util.Random 在Java的API帮助 ...
- cocos2d-x 3.0 经常使用对象的创建方式
cocos2d-x 3.0 中全部对象差点儿都能够用create函数来创建,其它的创建方式也是有create函数衍生. 以下来介绍下create函数创建一般对象的方法,省得开发中常常忘记啥的. 1.精 ...
- Java关键字整理之一
变量.函数.类的前面都可能会用到关键字,最常见的 private.public.protected.default 这四个修饰符的访问权限如下表: -------------------------- ...
- 程序猿爱情表白专用html5动画网页的代码
程序猿爱情表白专用html5动画网页的代码 下载地址:源代码 程序员表白专用的html5动画特效网页,真的挺羡慕创作者的水平,有这水平能够把爱表白给想表白的人,不要以为那些鲜花是用 的图片.你会发如今 ...
- Python标准库：内置函数callable(object)
假设对象object參数是能够调用的对象,就返回True.否则返回False.只是要注意的是,当一个对象是能够调用的.并不表示调用该对象时运行一定成功,但不可调用的对象去调用时一定不会成功.假设类对象 ...