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 ...
随机推荐
- WEBGL学习【九】立方体贴不同的纹理
<html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" ...
- xunsearch实战经验总结
一.定义好配置文件(非常关键) a):如果需要做精确搜索建议对字段设定index=self,tokenizer = full,不然xunsearch会对字段做分词处理: b):数字区间搜索需设定 ty ...
- Python 不同列表时间测试
import timeit import threading def test1(): l = [] for i in range(1000): l = l + [i] def test2(): l ...
- @value 注解获取属性文件中的值
一.属性文件 db.properties name=jack 二.配置文件 applicationContext.xml <!-- 加载配置文件,该节点只能存在一个,所以用 * ,加载所有属性文 ...
- 启动 Appium 自带模拟器
1.先在sclipse中新建并打开一个设备 2.启动appium 3.安装apk 打开cmd 并在sdk安装目录的tools文件夹下输入安装命令adb install xxx.apk(在这之前需要把 ...
- struts配置
创建struts2的应用,首先应如前面所示要搭建好环境.jar包的导入和web.xml配置这里不在写出来. 如上所示,struts2中是采用<package>元素来管理Action的,包 ...
- ie6 bug 收集
1.IE6中奇数宽高的BUG IE6下查看,变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数.高度也是一样的查看源码: CSS代码: #o ...
- MyBatis中动态SQL元素的使用
掌握MyBatis中动态SQL元素的使用 if choose(when,otherwise) trim where set foreach <SQL>和<include> 在应 ...
- windows系统中软件开发常用的软件
1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...
- C#高级编程八十三天----程序集的含义
程序集的含义 一.程序集是包括一个或多个类型定义文件和资源文件的集合.它同意我们分析可重用类型的逻辑表示和物理表示. 相当于你定义了一个项目XXProject,项目存在非常多文件(类,窗口,接口,资源 ...