• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

使用jQuery-Seat-Charts插件实现在线电影票选座功能 demo下载

JavaScript web前端中文站 3年前 (2017-08-19) 6335次浏览 已收录 4个评论

最近《战狼 2》大火,创造了 50 亿的票房,打破了多个记录。我相信大部分的小伙伴们都已经去看过了,而且有一部分就是在网上购买的电影票,例如淘宝的淘票票在线选票的功能。网上购票如此的方便,那么我们能用 HTML5+JavaScript 实现一款在线电影票的选票功能吗?
答案是肯定的,今天我们就来借助 jQuery 的jQuery-Seat-Charts插件来实现在线电影票选座功能。本案例(科文中心电影院)支持在线选座,票数统计,结算等功能。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

使用 jQuery-Seat-Charts 插件实现在线电影票选座功能 demo 下载

根据上面的实例,我相信你们可以制作一款针对 12306 的在线选火车票的效果,汽车票也一样。

下面看看具体的实现代码:

 <div class="demo">         
 <div id="seat-map">          
 <div class="front">屏幕</div>                          
 </div>      
 <div class="booking-details">          
 <p>影片:<span>星际穿越 3D</span></p>           
 <p>时间:<span>11 月 14 日 21:00</span></p>          
 <p>座位:</p>          
 <ul id="selected-seats"></ul>          
 <p>票数:<span id="counter">0</span></p>          
 <p>总计:<b>¥<span id="total">0</span></b></p>                  
 <button class="checkout-button">确定购买</button>                  
 <div id="legend"></div>      
 </div>  
 </div>

剩下的最主要的是使用 CSS 将页面中的各个元素美化。包括电影院布局,座位布局,选票功能实现,实时统计票数等功能。

 .front{
 width: 300px;
 margin: 5px 32px 45px 32px;
 background-color: #f0f0f0;  
 color: #666;
 text-align: center;
 padding: 3px;
 border-radius: 5px;}  

 .booking-details {
 float: right;
 position: relative;
 width:200px;height: 450px; }  

 .booking-details h3 {
 margin: 5px 5px 0 0;
 font-size: 16px;}  

 .booking-details p{
 line-height:26px; 
 font-size:16px; 
 color:#999}  

 .booking-details p span{color:#666}  

 div.seatCharts-cell {
 color: #182C4E;
 height: 25px;
 width: 25px;
 line-height: 25px;
 margin: 3px;
 float: left;
 text-align: center;
 outline: none;
 font-size: 13px;}  

 div.seatCharts-seat {
 color: #fff;
 cursor: pointer;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius: 5px;}  

 div.seatCharts-row {
 height: 35px;}  

 div.seatCharts-seat.available {
 background-color: #B9DEA0;}  

 div.seatCharts-seat.focused {
 background-color: #76B474;
 border: none;}  

 div.seatCharts-seat.selected {
 background-color: #E6CAC4;}  

 div.seatCharts-seat.unavailable {
 background-color: #472B34;
 cursor: not-allowed;}  

 div.seatCharts-container {
 border-right: 1px dotted #adadad;
 width: 400px;padding: 20px;
 float: left;}  

 div.seatCharts-legend {
 padding-left: 0px;
 position: absolute;
 bottom: 16px;}  

 ul.seatCharts-legendList {
 padding-left: 0px;}  

 .seatCharts-legendItem{
 float:left; 
 width:90px;
 margin-top: 10px;
 line-height: 2;}  

 span.seatCharts-legendDescription {
 margin-left: 5px;
 line-height: 30px;}  

 .checkout-button {
 display: block;
 width:80px; 
 height:24px; 
 line-height:20px;
 margin: 10px auto;
 border:1px solid #999;
 font-size: 14px; 
 cursor:pointer}  

 #selected-seats {
 max-height: 150px;
 overflow-y: auto;
 overflow-x: none;
 width: 200px;}  

 #selected-seats li{
 float:left; 
 width:72px; 
 height:26px; 
 line-height:26px; 
 border:1px solid #d3d3d3; 
 background:#f7f7f7; 
 margin:6px; 
 font-size:14px; 
 font-weight:bold; 
 text-align:center}

最后引入我们的 jQuery 的jQuery-Seat-Charts插件

 <script type="text/javascript" src="jquery.js"></script>  
 <script type="text/javascript" src="jquery.seat-charts.min.js"></script>

在调用该插件的 seatCharts()方法即可实现电影票选票功能的渲染。

 $('#seat-map').seatCharts()

以上就是大致的电影院选票功能的实现。完整的代码已共享在 github:https://github.com/mateuszmarkowski/jQuery-Seat-Charts

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 jQuery-Seat-Charts 插件实现在线电影票选座功能 demo 下载
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. The most effective man is normally the grooms most reliable and faithful good friend or relative. The perfect man is usually the grooms most trustworthy and faithful good friend or relative. The ushers could be the grooms brothers, cousin, or best pals, or brothers and shut kinfolk of the bride. Responsibilities of one of the best Man Before the wedding, he - pays for his own attire, bought or rented. May give the envelope to the officiant earlier than the ceremony. During the ceremony, he - shouldn't be a part of the processional but enters with the groom, standing behind the groom and barely to the left. After the ceremony, he - immediately serves as one of the witnesses in signing the marriage license. On the reception, he - does not stand within the receiving line unless he can be the father of the groom. After the reception, he - promptly returns both his and the grooms rented formal wear to the appropriate location.
    abu dhabi escorts2020-07-10 07:32 回复
  2. keren. kaka :)
  3. appreciate it considerably this fabulous website will be formal along with simple
    0loft2020-06-05 00:57 回复
  4. I every time emailed thi? web site post ρage tto alll my contacts, fоr the reason that if liкe tο reɑd it next my contacts will too.