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. Python爬虫1-----urllib模块

    1.加载urllib模块的request from urllib import request 2.相关函数: (1)urlopen函数:读取网页 webpage=request.urlopen(ur ...

  2. C++基础 (8) 第八天 数组指针 模板指针 C语言中的多态 模板函数

    1昨日回顾 2 多态的练习-圆的图形 3多态的练习-程序员薪资 4员工管理案例-抽象类和技术员工的实现 employee.h: employee.cpp: technician.h: technici ...

  3. json字符串通俗的介绍

    json 的本质就是字符串,按key:value这种键值对的格式定义的字符串 json就是传递javascript对象的语法,json只有两种结构,对象和数组,这两种结构嵌套和组合,来表示各种各样的数 ...

  4. Project Euler 16 Power digit sum（ 大数乘法 ）

    题意: 215 = 32768,而32768的各位数字之和是 3 + 2 + 7 + 6 + 8 = 26. 21000的各位数字之和是多少? 思路:大数乘法,计算 210 × 100 可加速计算,每 ...

  5. Problem 10

    Problem 10 # Problem_10.py """ The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17. ...

  6. Ubuntu14.04 Anaconda

    我虚拟机Ubuntu14.04上的Python已经存在了两个版本,一个是python 2.7,一个是Python 3.4.想在它上面安装Anaconda,但又有所顾虑.我先想到的是,先卸载Ubuntu ...

  7. POJ 2407

    裸 的求欧拉函数 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...

  8. PHP--规范化的文件上传

    <form action="" method="post" enctype="multipart/form-data"> < ...

  9. 多校第二场 1004 hdu 5303 Delicious Apples(背包+贪心)

    题目链接: 点击打开链接 题目大意: 在一个周长为L的环上.给出n棵苹果树.苹果树的位置是xi,苹果树是ai,苹果商店在0位置,人的篮子最大容量为k,问最少做多远的距离可以把苹果都运到店里 题目分析: ...

  10. Introduction to CMMI培训总结

     6月3日到5日,用了3天时间,參加了cmmi-dev的简单介绍课程培训,參加培训真的比上班都要累非常多啊!每天早上9点到下午6点.中午吃饭加歇息总共1小时.晚上还有作业要做,每天睡觉都要到11点 ...