最近大家都在谈论一部热播的电影《我不是药神》,由于故事贴近生活,贴近到每个人都能切身体会到演员的情绪,因为感同身受,所以就更能够引起共鸣。影片在批判社会现实、揭露尖锐矛盾,反映社会底层人民得不到满足而不顾法律正义的同时,又给人们看到改变社会现实的希望与药方。
于是纷纷涌入影院,希望一起探讨这个话题。于是,美团影院、QQ购票,猫眼购票等等成是我们购票的首选。
网上购票如此的方便,那么我们能用HTML5+JavaScript实现一款在线电影票的选票功能吗?
答案是肯定的,今天我们就来借助jQuery的jQuery-Seat-Charts插件来实现在线电影票选座功能。
本案例(科文中心电影院)支持在线选座,票数统计,结算等功能。
根据上面的实例,我相信你们可以制作一款针对12306的在线选火车票的效果,汽车票也一样。
下面看看具体的实现代码:
屏幕
影片:星际穿越3D
时间:11月14日 21:00
座位:
票数:0
总计:¥0
确定购买
剩下的最主要的是使用CSS将页面中的各个元素美化。
包括电影院布局,座位布局,选票功能实现,实时统计票数等功能。
.front
.booking-details
.booking-details h3
.booking-details p
.booking-details p span
div.seatCharts-cell
div.seatCharts-seat
div.seatCharts-row
div.seatCharts-seat.available
div.seatCharts-seat.focused
div.seatCharts-seat.selected
div.seatCharts-seat.unavailable
div.seatCharts-container
div.seatCharts-legend
ul.seatCharts-legendList
.seatCharts-legendItem
span.seatCharts-legendDescription
.checkout-button
#selected-seats
#selected-seats li
最后引入我们的jQuery的jQuery-Seat-Charts插件
在调用该插件的seatCharts()方法即可实现电影票选票功能的渲染。
$('#seat-map').seatCharts()
以上就是大致的电影院选票功能的实现。
如果觉得还不过瘾,不妨可以关注一下微信49 15 24 96,还有更多精彩案例
领取专属 10元无门槛券
私享最新 技术干货