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:壮汉专用，电影院划位工具)的更多相关文章

  1. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  2. Node.js之包与npm包管理工具

    Node.js之包与npm包管理工具 1.Node.js中的包 1.1在一个包中包含如下内容: package.json:对包进行描述 在bin子目录中存放二进制文件 在lib子目录中存放JavaSc ...

  3. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...

  4. js如何判断小数点后有几位

    <script> var n=3.143423423;alert(n.toString().split(".")[1].length); </script> ...

  5. js实现去文本换行符小工具

    js实现去文本换行符小工具 一.总结 一句话总结: 1.vertical属性使用的时候注意看清定义,也注意父元素的基准线问题.vertical-align:top; 2.获取textareaEleme ...

  6. js 让小数四舍五入保留两位小数的函数是？

    js 让小数四舍五入保留两位小数的函数是? 例子:data.relations[i].data[j].toFixed(2) toFixed(2)这个函数就是保留两位小数的作用

  7. 【一统江湖的大前端（9）】TensorFlow.js 开箱即用的深度学习工具

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...

  8. JS文档和Demo自动化生成工具 - SmartDoc发布

    曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...

  9. JS内存泄漏 和Chrome 内存分析工具简介（摘）

    原文地址:http://web.jobbole.com/88463/ JavaScript 中 4 种常见的内存泄露陷阱   原文:Sebastián Peyrott 译文:伯乐在线专栏作者 - AR ...

随机推荐

  1. Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    系统:win10 使用 npm 安装依赖时报错: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwi ...

  2. redis_ 5 集群

    [转自 ]https://www.cnblogs.com/hjwublog/p/5681700.html#_label0 Redis集群简介 Redis 集群是3.0之后才引入的,在3.0之前,使用哨 ...

  3. SVN中各种符号箭头含义

    黄色感叹号(有冲突): -- 这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许 你提交,防止你的提交覆盖 ...

  4. SSAO + FXAA

    如今已经完毕了渲染器的屏幕空间环境光遮挡(SSAO)算法和FXAA高速反走样算法,等有时间就把当中的相关原理和当中遇到的问题进行总结发表.

  5. 2016.03.28,英语,《Vocabulary Builder》Unit 07

    vis: comes from a Latin verb meaning 'see'. vision: ['vɪʒn] n. 视觉,先见之明,光景,视力,眼力,幻想,影像 vt. 幻想. ; vid- ...

  6. caioj1497&&bzoj3125: CITY

    震惊!bzoj居然又被苏大佬D飞了... 这题煞笔模板题好吧. 然而bzojAC caiojWA%40??? 好强啊 今天早上发现是m打成n了囧 #include<cstdio> #inc ...

  7. DNS反射放大攻击分析——DNS反射放大攻击主要是利用DNS回复包比请求包大的特点，放大流量，伪造请求包的源IP地址为受害者IP，将应答包的流量引入受害的服务器

    DNS反射放大攻击分析 摘自:http://www.shaojike.com/2016/08/19/DNS%E6%94%BE%E5%A4%A7%E6%94%BB%E5%87%BB%E7%AE%80%E ...

  8. hdoj--1754--I Hate It(线段树)

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. Oracle数据库三种标准的备份方法

    Oracle数据库的三种标准的备份方法: 1.导出/导入(EXP/IMP). 2.热备份. 3.冷备份. 注释:导出备件是一种逻辑备份,冷备份和热备份是物理备份. 一.导出/导入(Export/Imp ...

  10. Redis学习笔记（二） Redis 数据类型

    Redis 支持五种数据类型:string(字符串).list(列表).hash(哈希).set(集合)和 zset(有序集合),接下来我们讲解分别讲解一下这五种类型的的使用. String(字符串) ...