【HTML】HTML作业-----影院售票界面

coding加油站

已于 2023-02-20 20:23:19 修改

阅读量3.1k

点赞数 4

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html 前端 javascript

于 2022-08-15 20:18:20 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126353916

版权

web前端作业同时被 2 个专栏收录

58 篇文章 68 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 26 订阅

订阅专栏

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

影院售系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

电影院售票界面采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选，

2.1.1、页面布局思想：

利用一个大的div包括整个页面，然后从中间分开，左边一个div和右边一个div,设置宽度，高度可以不设置，然后利用浮动，就可以实现页面布局，当然如果没有设置给父盒子设置高度的话，需要清除浮动，本次使用的clearfix类名，编写css样式清除浮动，左边盒子可以分成三个部分，头部、中间（使用表格）、底部；右边，分成两个部分，第一部分要继续细分，成左右两部分，然后要再次利用浮动完成布局，第二部分用div向下排列就可以了。

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--电影院售票界面

4、作品图片

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影售票界面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="contener clearfix">
        <div class="contener_left">
            <div class="header">
                屏幕
            </div>
            <div class="main">
                <table cellspacing="0">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="p60"></td>
                        <td class="p60"></td>
                        <td class="p60"></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <div>
                    <i></i>
                    <sapn>已选座位</sapn>
                </div>
                <div>
                    <i></i>
                    <sapn>可选座位</sapn>
                </div>
                <div>
                    <i></i>
                    <sapn>售出座位</sapn>
                </div>
            </div>
        </div>
        <div class="contener_right">
            <div class="pic_jj clearfix">
                <div class="pic_img">
                    <img src="images/1.png" alt="">
                </div>
                <div class="pic_txt">
                    <ul>
                        <li>中文名：<i>coding加油站</i></li>
                        <li>英文名：Lost in Russia</li>
                        <li>剧情：喜剧</li>
                        <li>版本：中文2D</li>
                        <li>中国大陆/126分钟</li>
                        <li>2020.02</li>
                    </ul>
                </div>
            </div>
            <div class="pic_movies">
                <ul>
                    <li>影院：<b>万达影城</b></li>
                    <li>影厅：<b>8号影厅</b></li>
                    <li>场次：<b>2020.05.18（周一）20：00</b></li>
                    <li>座位：<span class="zw"></span></li>
                    <li>已选择<b class="color-red sit"></b>个座位，<b class="color-red ">再次点击可取消，您最多只能买5张票！</b></li>
                </ul>
                <div class="pic_count">
                    <p>单价：<b>&yen;38.00</b></p>
                    <p>总价：<b class="color-red countPrice">&yen;0.00</b></p>
                    <button class="btnSub">确认信息，下单</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

选座实现原理：

当我们座位选中时，我们就利用jQuery给当前座位添加选中的类名，当座位又取消选中时，我们就把添加的类名移除掉。首先要获取左边座位的索引，然后对应索引进行判断，已得到行和列，利用jQuery动态的创建一个座位，把行和列加到座位里面去，然后把创建的座位动态的显示到页面上。

定义count为已选座位的个数，countPrice为总价钱，利用公式：总价钱=单价*已选座位的个数，算出总价的金额。

总结

以上就是本次项目的全部内容，需要交流或者获取代码请搜索公众号：coding加油站，获取