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 ...
随机推荐
- js中浏览器兼容startsWith 、endsWith 函数
在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...
- POJ 1811 Prime Test（ Pollard-rho整数分解经典题 ）
链接:传送门 题意:输入 n ,判断 n 是否为素数,如果是合数输出 n 的最素因子 思路:Pollard-rho经典题 /************************************** ...
- 【ACM-ICPC 2018 南京赛区网络预赛 E】AC Challenge
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写个DP 设f[j]表示已经做的题的状态为j的情况下接着选能获得的最大分数. 显然是个倒推. 记忆化搜索一波 dfs(i,j) 表示 ...
- idea debug打得断点第一次可以进入，第二次不能进入
- BA-siemens-insight在win7下如何配置opc接口
一.运行环境:win7(OPC接口在win_xp下配置需安装插件,不好意思没搞定,现在只有win7系统32位下的教程了) 由于OPC(OLE for Process Control)建立在Micros ...
- cocos2d-x 3.0 经常使用对象的创建方式
cocos2d-x 3.0 中全部对象差点儿都能够用create函数来创建,其它的创建方式也是有create函数衍生. 以下来介绍下create函数创建一般对象的方法,省得开发中常常忘记啥的. 1.精 ...
- Photon + Unity3D 线上游戏开发 学习笔记(一)
大家好. 我也是学习Photon + unity3D 的新手 有什么说错的地方大家见谅哈. 我的开发环境是 unity3D 4.1.3 , Visual Studio 是2010 版本号的 p ...
- Sqoop_具体总结 使用Sqoop将HDFS/Hive/HBase与MySQL/Oracle中的数据相互导入、导出
一.使用Sqoop将MySQL中的数据导入到HDFS/Hive/HBase watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWFyb25oYWRvb3A=/ ...
- Java 后台性能优化简要
业务系统性能优化的前提时观察和诊断.观察工具例如以下:前端优化工具:YSlow页面响应时间:Firebug方法对应时间:btraceGC日志分析:JVM 启动參数数据库优化:慢查询系统资源调用:监控 ...
- log4j日志存储到数据库
一.前提条件 系统必须是使用LOG4J进行日志管理,否则方法无效. 系统必须包含commons-logging-xxx.jar,log4j-xxx.jar这两个JAR包,XXX为版本号. 二.操作步骤 ...