【图文】关于消费者对在网上购买电影票并直接选定座位的看法_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&100W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
关于消费者对在网上购买电影票并直接选定座位的看法
阅读已结束，下载本文到电脑
定制HR最喜欢的简历
你可能喜欢(走路也带风)
第三方登录：自己动手敲代码，轻松实现在线电影票选座功能
最近大家都在谈论一部热播的电影《我不是药神》，由于故事贴近生活，贴近到每个人都能切身体会到演员的情绪，因为感同身受，所以就更能够引起共鸣。影片在批判社会现实、揭露尖锐矛盾，反映社会底层人民得不到满足而不顾法律正义的同时，又给人们看到改变社会现实的希望与药方。于是纷纷涌入影院，希望一起探讨这个话题。于是，美团影院、QQ购票，猫眼购票等等成是我们购票的首选。
网上购票如此的方便，那么我们能用HTML5+Java实现一款在线电影票的选票功能吗？
答案是肯定的，今天我们就来借助jQuery的jQuery-Seat-Charts插件来实现在线电影票选座功能。
本案例(科文中心电影院)支持在线选座，票数统计，结算等功能。
根据上面的实例，我相信你们可以制作一款针对12306的在线选火车票的效果，汽车票也一样。
下面看看具体的实现代码：
&div class="demo"&
&div id="seat-map"&
&div class="front"&屏幕&/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&
剩下的最主要的是使用CSS将页面中的各个元素美化。
包括电影院布局，座位布局，选票功能实现，实时统计票数等功能。
.front{width: 300margin: 5px 32px 45px 32background-color: #f0f0f0; color: #666;text-align:padding: 3border-radius: 5}
.booking-details {float:position:width:200height: 450 }
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16}
.booking-details p{line-height:26 font-size:16 color:#999}
.booking-details p span{color:#666}
div.seatCharts-cell {color: #182C4E;height: 25width: 25line-height: 25margin: 3float:text-align:outline:font-size: 13}
div.seatCharts-seat {color: #cursor:-webkit-border-radius:5-moz-border-radius:5border-radius: 5}
div.seatCharts-row {height: 35}
div.seatCharts-seat.available {background-color: #B9DEA0;}
div.seatCharts-seat.focused {background-color: #76B474;border:}
div.seatCharts-seat.selected {background-color: #E6CAC4;}
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-}
div.seatCharts-container {border-right: 1px dotted #width: 400padding: 20float:}
div.seatCharts-legend {padding-left: 0position:bottom: 16}
ul.seatCharts-legendList {padding-left: 0}
.seatCharts-legendItem{float: width:90margin-top: 10line-height: 2;}
span.seatCharts-legendDeion {margin-left: 5line-height: 30}
.checkout-button {display:width:80 height:24 line-height:20margin: 10border:1px solid #999;font-size: 14 cursor:pointer}
#selected-seats {max-height: 150overflow-y:overflow-x:width: 200}
#selected-seats li{float: width:72 height:26 line-height:26 border:1px solid #d3d3d3; background:#f7f7f7; margin:6 font-size:14 font-weight: text-align:center}
最后引入我们的jQuery的jQuery-Seat-Charts插件
& type="text/java" src="jquery.js"&&/&
& type="text/java" src="jquery.seat-charts.min.js"&&/&
在调用该插件的seatCharts()方法即可实现电影票选票功能的渲染。
$('#seat-map').seatCharts()
以上就是大致的电影院选票功能的实现。
如果觉得还不过瘾，不妨可以关注一下微信49 15 24 96，还有更多精彩案例
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
与其职场撕杀血战，不如以IT技术一压群芳，月薪过万！
Java前沿资讯，动态分享，我有一手资料
今日搜狐热点为什么在amc网上买电影票没给我选座位?【纽约吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：70,737贴子：
为什么在amc网上买电影票没给我选座位?收藏
头一次在网上订电影票 本来开开心心的都买完后发现amc并没有给我选座位 我要怎么办啊?
电影院还有编座位的吗？
我昨天看的，网上买的时候有定位置啊，到了电影院打出票来看看有位置号没，还是没有问问管理员就可以了。
登录百度帐号主题 : 在线选座购买电影票APP。关于座位不能留空的算法
级别: 新手上路
可可豆: 22 CB
威望: 22 点
在线时间: 126(时)
发自: Web Page
来源于&&分类
在线选座购买电影票APP。关于座位不能留空的算法&&&
有做过在线选座的APP的大神吗？类似猫眼的，关于选座旁边座位不能留空的算法怎么算的啊？急急急
级别: 版主
UID: 430276
可可豆: 5812 CB
威望: 4006 点
在线时间: 1075(时)
发自: Web Page
什么叫选座旁边座位&&不能留空？
级别: 新手上路
可可豆: 22 CB
威望: 22 点
在线时间: 126(时)
发自: Web Page
回 1楼(十万个逗) 的帖子
就是购买电影票时，比如说5排5座的座位已经出售了，5排6，5排7都还没有出售，那么你就不能购买5排7座。你必须要买5排6座。做过类似猫眼这种APP就知道我说什么了。
级别: 版主
UID: 430276
可可豆: 5812 CB
威望: 4006 点
在线时间: 1075(时)
发自: Web Page
没有啊&&猫眼可以选择吧？&& 不过找你这种场景很简单，做个判断就行了。比如说5-5售出&&状态是1&& 点击5-7和5-3的时候你就判断前后 5-3 或 5-6&&是不是空，如果是那么不能选。 就酱。
级别: 新手上路
可可豆: 28 CB
威望: 31 点
在线时间: 37(时)
发自: Web Page
哥们，请问这个限制规则，你们后来如何做了？能分享下吗？
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版}