java电影票选座_jQuery仿猫眼电影票在线选座购买特效
特效描述:电影票选座 在线选座 购买特效。
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
电影:天将雄师
时间:03月20日 22:15
座位:
票数:0
总价:¥0
var price = 100; //电影票价
$(document).ready(function() {
var $cart = $('#seats_chose'), //座位区
$tickects_num = $('#tickects_num'), //票数
$total_price = $('#total_price'); //票价总额
var sc = $('#seat_area').seatCharts({
map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
'cccccccccc',
'cccccccccc',
'__________',
'cccccccc__',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cc__cc__cc'
],
naming: {//设置行列等信息
top: false, //不显示顶部横坐标(行)
getLabel: function(character, row, column) { //返回座位信息
return column;
}
},
legend: {//定义图例
node: $('#legend'),
items: [
['c', 'available', '可选座'],
['c', 'unavailable', '已售出']
]
},
click: function() {
if (this.status() == 'available') { //若为可选座状态,添加座位
$('
' + (this.settings.row + 1) + '排' + this.settings.label + '座')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$tickects_num.text(sc.find('selected').length + 1); //统计选票数量
$total_price.text(getTotalPrice(sc) + price);//计算票价总金额
return 'selected';
} else if (this.status() == 'selected') { //若为选中状态
$tickects_num.text(sc.find('selected').length - 1);//更新票数量
$total_price.text(getTotalPrice(sc) - price);//更新票价总金额
$('#cart-item-' + this.settings.id).remove();//删除已预订座位
return 'available';
} else if (this.status() == 'unavailable') { //若为已售出状态
return 'unavailable';
} else {
return this.style();
}
}
});
//设置已售出的座位
sc.get(['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');
});
function getTotalPrice(sc) { //计算票价总额
var total = 0;
sc.find('selected').each(function() {
total += price;
});
return total;
}
java电影票选座_jQuery仿猫眼电影票在线选座购买特效相关推荐
- 仿猫眼电影在线选座组件
前言部分 本文基本实现电影选座的效果,参考的是猫眼的效果来进行编写.2019年开年第一个月这篇可能是这个月的最后一篇了,希望今年继续做到坚持每月写博客的习惯,虽然博客的质量还不行,这主要还是因为能力上 ...
- 微信小程序仿猫眼电影在线选座实现
select-seat.js const api = require('../../../utils/api.js') const app = getApp(); let that; Page({/* ...
- JSP电影院在线订票系统JSP电影购票系统JSP电影票预订系统JSP电影院管理支持在线选座
JSP电影院在线订票系统JSP电影购票系统JSP电影票预订系统JSP电影院管理支持在线选座 protected void doGet(HttpServletRequest req, HttpServl ...
- HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
- HTML+CSS+JavaScript实现仿猫眼电影购票选座
一.功能实现 (1)在页面左侧区域,单击"可选座位",将座位设置为"已选座位",一次最多选5 个座位.右侧座位号汇总区域显示已选中的座位号,并显示电影票总价. ...
- java演出厅选票_高仿猫眼电影选座(选票)模块-b
上图看效果先: 1)画座位图其实不是很难一般数据都会给坐标,将坐标对应座位画出来就可以了,主要是开场动画要设置默认大小,还有座位图的数量也不是固定的,所以在初始化座位图的时侯就默认算出了整个座位图的大 ...
- 基于JavaWeb的电影院在线选座订票管理系统
一.基于JavaWeb的电影院在线选座订票管理系统 影院在线选座订票管理系统逐渐方便了人们的社会生活,成为数字化的一种体现.近年来,随着网络的发展,电子商务迅猛发展,网上选座订票逐渐赢得了优势.为了改 ...
- TTMS(仿猫眼电影)iOS版项目报告
文章目录 前言 GitHub 所有使用到的第三方库 项目详细说明 登陆注册 登陆 预览 文件名 注册 预览 文件名 总结 城市定位 预览 文件名 总结 选择电影 预览 文件名 总结 选择影院 预览 文 ...
- 淘宝电影成全国最大在线选座平台 覆盖702家影院
近几年,中国电影市场一片红火,热门影片也层出不穷,很多场次的票常常提前售完,影迷们赶到电影院往往要等上1个多小时才能进场,有时候甚至买不到票看不成电影.在如此红火的电影市场下,支持在线选座的订票平台越 ...
最新文章
- Soft robotics:造仿生昆虫机器人柔性骨骼新技术,只需2小时,成本不到7块!
- [征询意见][投票]先集中力量做好一个开源项目
- PHP伪静态与防注入
- 电路常识性概念(1)-输入、输出阻抗
- 英特尔发布全新显卡品牌“锐炫” 首款显卡将于 2022 年上市
- Django Rest framework实现流程
- 【人脸表情识别】基于matlab LBP+LPQ算法融合人脸表情识别【含Matlab源码 432期】
- cad lisp 示坡线_AutoCAD命令-画示坡线
- windows 10字体突然变小变细,模糊
- Flink实时数仓(尚硅谷)- 数据采集
- 2022年,尽量还是别裸辞了吧···
- 基于WEMOS的智能WiFi避障小车
- MT4外汇结余净值可用预付款
- manster网易云音乐大数据分析
- 清除目录下的SVN信息
- 2.25嵌入式设计(总结)
- C语言基础操作-位段
- 接口幂等性设计与实现
- java 打jar包 (JAR命令)
- 从互联网+角度看云计算的现状与未来(1)
热门文章
- Oracle :for update 把数据误删除,怎么恢复呢?
- 【R语言科研绘图】——韦恩图
- 软件测试常见的问题(理论题)
- AD域统一管理计算机安装软件,微软域和AD域的计算机统一安装 域用户安装软件域客户端PC批量分配自动安装教程...
- SCL3300倾角传感器使用心得
- 决策树(二):CART回归树与Python代码
- 如何在IDEA中配置阿里云maven镜像
- “湘潭神女”确属违规提拔任用 “神父”遭疯传
- 计算机科学教育专业属于哪一类,教育知识:计算机科学与技术专业属于什么门类...
- UNI-APP实现物联网中BLE蓝牙的数据交互