电影院选座效果实现
前幾天導師會議上，熱心的導師對我室友的圖書館系統(tǒng)提出建議，哎呀你覺著你這個選座可不可以整一個電影院選座的效果勒，是不是顯得高級些。于是苦逼的我開始試圖寫前端實現(xiàn)這個效果。
電影院選座效果實現(xiàn)
仔細思考后好像也不難，先找個前端樣式，然后加個帶數(shù)據(jù)跳轉，然后循環(huán)輸出座位并根據(jù)數(shù)據(jù)的狀態(tài)顯示不同樣式，最后加一個點擊選座效果就行了。。
1、找前端樣式
這里是github網址：前往
這里是gitee的網址：前往
效果如下圖所示：
2、thymeleaf
這里我使用的是這個工具進行循環(huán)輸出以及數(shù)據(jù)傳輸。
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" /> 自習室座位預約</h4><p style="text-align:center;color: #ac2925">注意所有座位將會在零點更新預約狀態(tài)，請同學們注意預約情況！！</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> </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"> 部分圖片素材來自互聯(lián)網，版權歸原作者及網站所有</p></div></div></div></footer></div> </div> </body> </html>4、注意
傳入的座位數(shù)據(jù)有no和state，分別代表座位id與當前是否被占。
本文章僅為作者平時一個小demo分享，若對你沒有幫助，那我十分抱歉下次還發(fā)。
總結
- 上一篇： 注册域名需要资格吗_注册域名要具备哪些条
- 下一篇： Requests 和 Scrapy 中的