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. [置顶] 来自 HeroKu 的 HTTP API 设计指南(中文版)

    转载:http://get.jobdeer.com/343.get 来自 HeroKu 的 HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国 ...

  2. HTTPie：一个不错的 HTTP 命令行客户端

    转自:http://top.jobbole.com/9682/ HTTPie:一个不错的 HTTP 命令行客户端 HTTPie (读aych-tee-tee-pie)是一个 HTTP 的命令行客户端. ...

  3. Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现

    Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...

  4. 无edu邮箱如何申请onedirve 5T账户

    如何申请onedirve 5T账户 要申请onedrive的教育版,一般是需要教育邮箱的.但如果没有教育邮箱,则需要找一些学校的漏洞来申请. 第一个方法是申请国外学校的校友邮箱,这就需要相应的校友信息 ...

  5. UVA 12124 UVAlive 3971 Assemble(二分 + 贪心)

    先从中找出性能最好的那个数, 在用钱比較少的去组合,能组出来就表明答案在mid的右边,反之在左边, #include<string.h> #include<map> #incl ...

  6. centos6安装eclipse

    1. 下载eclipse 我下载的是eclipse-jee-juno-SR2-linux-gtk-x86_64.tar.gz 能够在http://www.eclipse.org/downloads/处 ...

  7. 串口之CreateFile 函数具体解释

    HANDLE CreateFile( LPCTSTR lpFileName, //指向文件名称的指针 DWORD dwDesiredAccess, //訪问模式(写/读) DWORD dwShareM ...

  8. UVA 11825 Hackers’ Crackdown 状压DP枚举子集势

    Hackers’ Crackdown Miracle Corporations has a number of system services running in a distributed com ...

  9. 英语发音规则---S字母

    英语发音规则---S字母 一.总结 一句话总结: 1.S 在音节开头或清辅音前 /s/? sit /sɪt/ vt.& vi.坐 seat /si:t/ n.席位 sell /sel/ vt. ...

  10. [IOI 1998] Polygon

    [题目链接] http://poj.org/problem?id=1179 [算法] 区间DP [代码] #include <algorithm> #include <bitset& ...