首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自己动手敲代码,轻松实现在线电影票选座功能

最近大家都在谈论一部热播的电影《我不是药神》,由于故事贴近生活,贴近到每个人都能切身体会到演员的情绪,因为感同身受,所以就更能够引起共鸣。影片在批判社会现实、揭露尖锐矛盾,反映社会底层人民得不到满足而不顾法律正义的同时,又给人们看到改变社会现实的希望与药方。

于是纷纷涌入影院,希望一起探讨这个话题。于是,美团影院、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,还有更多精彩案例

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180729A0N3IY00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券