电影院选座效果实现

安泽、

已于 2022-04-14 11:06:06 修改

阅读量2.9k

点赞数 2

分类专栏：日常bug 文章标签： css 前端

于 2022-04-10 18:27:16 首次发布

本文链接：https://blog.csdn.net/qq_44816011/article/details/124082603

版权

日常bug 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前几天导师会议上，热心的导师对我室友的图书馆系统提出建议，哎呀你觉着你这个选座可不可以整一个电影院选座的效果勒，是不是显得高级些。于是苦逼的我开始试图写前端实现这个效果。

电影院选座效果实现

仔细思考后好像也不难，先找个前端样式，然后加个带数据跳转，然后循环输出座位并根据数据的状态显示不同样式，最后加一个点击选座效果就行了。。

1、找前端样式

这里是github网址：前往
这里是gitee的网址：前往

效果如下图所示：

2、thymeleaf

这里我使用的是这个工具进行循环输出以及数据传输。
1、目前我是直接一行到底多次录入，有换行需求自行找th:each怎么隔行输出的法子
2、效果够用，完事

3、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>


    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" href="../static/css/style.css" />
    <script type="text/javascript" th:src="@{/js/script.js}" src="../static/js/script.js"></script>

    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}" href="../static/css/bootstrap.css" />
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}" src="../static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}" src="../static/js/bootstrap.js"></script>
   
</head>
<body>
<!-- 导航 -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-collapse collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active"><a class="navbar-brand hidden-sm" th:href="@{/}">
                    <span class="glyphicon glyphicon-home"></span> 主页</a></li>

             
            </ul>
          
        </div>
    </div>
</div>
<!--主体-->
<div class="container">
    <br><br>
    
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h4 class="text-center"><span class="glyphicon glyphicon-saved" />&nbsp;自习室座位预约</h4>
                    <p style="text-align:center;color: #ac2925">注意所有座位将会在零点更新预约状态，请同学们注意预约情况！！</p>
                  

                    <!--座位展示 -->
                    <div class="wuliao">
                        <label>图书馆座位展示: </label>

                    </div>

                    <ul class="showcase">
                        <li>
                            <div class="seat"></div>
                            <small>可选择的</small>
                        </li>
                        <li>
                            <div class="seat seatshow"></div>
                            <small>当前选中</small>
                        </li>
                        <li>
                            <div class="seat occupied"></div>
                            <small>已被占</small>
                        </li>
                    </ul>

                    <div class="seat-container">
                        <div class="screen"></div>

                        <div   class="row" >
                            <div th:each="cow:${cow1}" >
                                <div th:class="${cow.getState()==0?'seat':'seat occupied'}" >
                                    <a th:href="@{/接口(cid=${cow.getNo()},sid=${session.student.sid})}" onclick="return confirm('确认预约座位吗？')">
                                        <span class=""></span>&nbsp;&nbsp;&nbsp;</a>
                                </div>
                            </div>

                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--页脚-->
    <div style="margin-bottom: 100px"></div>
    <div class="row" style="margin-top: 40px">
        <footer class="navbar navbar-fixed-bottom" style="background-color:#000000;">
            <div class="container">
                <div class="row" style="padding-top: 20px;padding-bottom: 10px">
                  

                    <div class="col-sm-4" >

                        <p style="color: #eeeeee"> 部分图片素材来自互联网，版权归原作者及网站所有</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
</body>
</html>

4、注意

传入的座位数据有no和state，分别代表座位id与当前是否被占。

本文章仅为作者平时一个小demo分享，若对你没有帮助，那我十分抱歉下次还发。

安泽、

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
电影院选座效果实现

前几天导师会议上，热心的导师对我室友的图书馆系统提出建议，哎呀你觉着你这个选座可不可以整一个电影院选座的效果勒，是不是显得高级些。于是苦逼的我开始试图写前端实现这个效果。电影院选座效果实现仔细思考后好像也不难，先找个前端样式，然后加个带数据跳转，然后循环输出座位并根据数据的状态显示不同样式，最后加一个点击选座效果就行了。。1、找前端样式这里是github网址：前往这里是gitee的网址前往效果如下图所示：2、thmeleaf这里我使用的是这个工具进行循环输出以及数据传输。1、目前我是.
复制链接

扫一扫