网站开发工具.docVIP

武 汉 轻 工 大 学 《网站开发工具》大作业报告 专业 计算机科学与技术 学号 1XXXXXX 姓名 X X 日期 2015.12.17 实验目的： 通过制作一个电影院售票界面来掌握使用 HTML、CSS、JAVASCRIPT等网页前端开发语言。 实验要求： 1、售票界面应该具有以下功能： ⑴．至少有两种售票价格 ⑵．一次能卖多张票 ⑶．显示售票的单价和总价 ⑷．售过电影票与未售票要有图形区别 ⑸．要用图形方式进行电影座位选择 2、扩展功能： ⑴．能用后端程序存储数据 需求分析： 通过对实验要求的揣摩，分析如下： （1）要实现多种票价就得给座位分区或者是分配不同的ID，这样可以完成对不同的区或者不同的ID进行统一操作； （2）一次买多票，就是对座位进行单击能产生事件，并且能累加单击事件。点击一个座位，不但能被标记选中，还能再单击其他的座位； （3）显示就是一个比较常见的功能了，就是显示前一个需求中产生的结果，在这里因为有两个内容需要显示，为了视觉直观，要将其分别放在两块区域，让人不产生疲劳； （4）票的未售、选中、已售有图形或颜色区别，用两个函数是完全足够完成的，其中一个是单击产生事件的函数，另一个则处理这个事件，两者结合使用； （5）座位的排版也是一个重要的组成部分，画座位既可以用jQuery中的库函数，也可以用JavaScript中的函数来做，可能jQuery这种直接调用比较简单一些，无论哪种方法，都能完成实验的要求。 系统框架： 模块设计： body中DIV的设计： 界面中划分为左边和右边两个DIV块，class分别定义为left和right，让其分别浮动在左右两边。在left中定义class分别为screen、first和last的三个DIV，用来画屏幕、VIP座位和普通区座位；而在right中定义了class分别为top、middle和bottom的三个DIV，用来做显示屏和“购买”按钮。 CSS的设计： 根据在body中定义DIV的class，在head的style type=text/css中，我要把所有的DIV块的位置、大小、样式都进行设置，例如: margin、padding、width、height、min-width、min-height、text-align、background、border、color，该有百分百的就用百分百，要用像素的就严格写出多少px，尽量做好每一个细节。 JavaScript的设计： 在head的script type=text/javascript中，我设置了三个function（）：第一个function init（name）是用来初始化座位的函数，也就是对座位的绘制，这里用到了td来画座位，用for循环分别为VIP区和普通区各画24个座位，并给每一个座位设置ID，添加一个单击事件函数showme（this）。 第二个function showme（obj）是用来响应在初始化函数中对座位单击的处理，它是由三个判断语句组成。第一个判断是用来控制买票的张数，这里设置的是最多可购买4张票，超过4张则会弹框提醒；第二个判断是对座位选中后或者取消选择的处理，若单击的座位RGB颜色为蓝色 ，则对相应的money和number做减处理，并且将background填充为空，若单击的座位本来就无颜色，则对相应的money和number做加处理，并且将background填充蓝色；第三个判断是对选中座位信息和总价的展示，如果number长度为0，则两块显示区都显示“无”，否则显示相应的座位信息和总票价。 第三个function sold（）是用来对“购买”按钮的处理，它主要实现两个功能，第一是将购买的票对应座位填充为红色（更改外观），第二是弹框显示总票价。 编码实现： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title选票/title script type=text/javascript window.onload=function(){ init(row1); init(row2); } var number=[]; //选中的票数 var money=0;