前端JS特效第28集:JQuery电影选座插件

JQuery电影选座插件,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery在线选座(影院版)</title><meta name="keywords" content="jQuery在线选座,jQuery选座系统" /><meta name="description" content="jquery.seat-charts是一款适合电影票、高铁票的在线选座插件。" /><link rel="stylesheet" type="text/css" href="css/jq22.css" /><style type="text/css">.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}.booking_area {float: right;position: relative;width:200px;height: 450px; }.booking_area h3 {margin: 5px 5px 0 0;font-size: 16px;}.booking_area p{line-height:26px; font-size:16px; color:#999}.booking_area 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}#seats_chose {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}#seats_chose 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}</style></head><body><div class="container"><h2 class="title"><a href="http://www.jq22.com/jquery-info2692">jQuery在线选座(影院版)</a></h2><div class="demo clearfix"><!---左边座位列表-----><div id="seat_area"><div class="front">屏幕</div>					</div><!---右边选座信息-----><div class="booking_area"><p>电影:<span>天将雄师</span></p><p>时间:<span>03月20日 22:15</span></p><p>座位:</p><ul id="seats_chose"></ul><p>票数:<span id="tickects_num">0</span></p><p>总价:<b>¥<span id="total_price">0</span></b></p><input type="button" class="btn" value="确定购买"/><div id="legend"></div></div></div></div><script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="jquery.seat-charts.min.js"></script><script type="text/javascript">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') { //若为可选座状态,添加座位$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>').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;}</script></body></html>

全部代码:JQuery电影选座插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3227393.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

2024-07抖音/快手/小红书/视频号/美团无人直播技术:最新不封号无人直播的操作方法详细介绍

2024年最新研究出来的无人直播技术&#xff0c;目前不封号&#xff0c;用途大大的&#xff0c;可带货&#xff0c;可引流&#xff0c;可获客。 手机自动直播源码通常涉及到实时流媒体技术和应用开发&#xff0c;它涉及以下几个关键部分&#xff1a; 摄像头接入&#xff1a;使用…

YOLOv8改进 | 注意力机制| 利用并行子网络构建深度较浅但性能卓越的网络【全网独家】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

[Spring] SpringBoot基本配置与快速上手

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

“LNMP环境搭建实战指南:从零开始配置CentOS 7下的Nginx、MySQL与PHP“

目录 1.前言 2.准备工作 2.1.环境信息 2.2.关闭SELinux和firewalld 3.安装Nginx 3.1.运行以下命令&#xff0c;安装Nginx 3.2.运行以下命令&#xff0c;查看Nginx版本 4.安装MySQL 4.1.更新秘钥 4.2.配置MySQL的YUM仓库 4.3.安装MySQL 4.4.查看MySQL版本 4.5.启动…

Let‘s Encrypt性价比最高的申请SSL证书

SSL/TLS证书作为确保网站数据传输安全性的重要手段&#xff0c;受到了广大网站运营者的青睐。然而&#xff0c;高昂的证书费用往往成为许多小型网站和个人博客的负担。 申请Lets Encrypt免费泛域名SSL证书步骤 1. 登录来此加密网站&#xff0c;输入域名&#xff0c;可以勾选泛…

二分查找算法【折半查找算法】

二分查找算法 二分查找算法&#xff0c;也称为折半查找&#xff0c;是一种在有序数组中查找特定元素的高效算法。它的工作原理是通过不断地将搜索区间减半来缩小目标值可能存在的范围&#xff0c;直至找到目标值或确定目标值不存在于数组中。二分查找的关键在于每次比较都能排…

节点流与处理流:深入解析Java中的IO流

节点流与处理流&#xff1a;深入解析Java中的IO流 1、节点流&#xff08;Node Stream&#xff09;1.1 定义1.2 好处1.3 示例 2、处理流&#xff08;Processing Stream&#xff09;2.1 定义2.2 好处2.3 创建特征2.4 示例 3、总结 &#x1f496;The Begin&#x1f496;点点关注&…

国产大模型第一梯队玩家,为什么pick了CPU?

AI一天&#xff0c;人间一年。 现在不论是大模型本身&#xff0c;亦或是AI应用的更新速度简直令人直呼跟不上—— Sora、Suno、Udio、Luma……重磅应用一个接一个问世。 也正如来自InfoQ的调查数据显示的那般&#xff0c;虽然AIGC目前还处于起步阶段&#xff0c;但市场规模已…

Java方法入门(006)

♦️方法的概念 什么是方法&#xff1f; 方法是将一组完成特定功能的代码整合在一起&#xff0c;以达到简化开发&#xff0c;减少代码耦合&#xff0c;提高代码复用性的结构&#xff0c;类似与C语言中的函数。方法是程序中最小的执行单元&#xff0c;可降低代码的重复性。 如用…

前后端如何实现非对称加解密-使用RSA为例讲解!

写在最前面&#xff0c;RSA是一种非对称加密算法&#xff0c;使用不同的公钥和私钥进行加密和解密。 下面是使用RSA进行加密和解密的代码示例&#xff1a; 前端&#xff1a;使用CryptoJS进行RSA加密 在前端JavaScript中&#xff0c;使用jsencrypt库来进行RSA加密&#xff1a…

MT3046 愤怒的象棚

思路&#xff1a; a[]存愤怒值&#xff1b;b[i]存以i结尾的&#xff0c;窗口里的最大值&#xff1b;c[i]存以i结尾的&#xff0c;窗口里面包含✳的最大值。 &#xff08;✳为新大象的位置&#xff09; 例&#xff1a;1 2 3 4 ✳ 5 6 7 8 9 则ans的计算公式b3b4c4c5c6b7b8b9…

从0开始的STM32HAL库学习1

基础外设初始化配置步骤 本学习以stm32f103c8t6为主控芯片学习。配合DMK-Keil使用&#xff0c;因为cubeide我还没找到很好的教程&#xff0c;而且用了几次发现不会用&#xff0c;所以还是先学习hal库&#xff0c;等hal库学习完之后再用学习使用cubeide&#xff0c;两者使用应该…

16. Revit API: Family、FamilySymbol、FamilyInstance

前言 前面写着一直絮絮叨叨&#xff0c;感觉不好。想找些表情包来&#xff0c;写得好玩点&#xff0c;但找不到合适的&#xff0c;或者说耗时费力又不满意&#xff0c;而自个儿又做不来表情包&#xff0c;就算了。 其次呢&#xff0c;之前会把部分类成员给抄表列出来&#xf…

短视频矩阵系统多账号搭建技术源码(saas开发者技术独立搭建)

在构建云服务环境以部署虚拟机方面&#xff0c;以Amazon Web Services&#xff08;AWS&#xff09;为示例&#xff0c;需采购并配置适当数量的EC2实例以及相关网络设施。 接下来&#xff0c;根据业务需求&#xff0c;应创建多个社交媒体平台如抖音和快手的官方账户&#xff0c;…

基于springboot+mybatis学生管理系统

基于springbootmybatis学生管理系统 简介&#xff1a; 题目虽然是学生管理系统&#xff0c;但功能包含(学生&#xff0c;教师&#xff0c;管理员),项目基于springboot2.1.x实现的管理系统。 编译环境 &#xff1a; jdk 1.8 mysql 5.5 tomcat 7 框架 &#xff1a; springboot…

Postman使用教程【项目实战】

目录 引言软件下载及安装项目开发流程1. 创建项目2. 创建集合(理解为&#xff1a;功能模块)3. 设置环境变量&#xff0c;4. 创建请求5. 测试脚本6. 响应分析7. 共享与协作 结语 引言 Postman 是一款功能强大的 API 开发工具&#xff0c;它可以帮助开发者测试、开发和调试 API。…

org.springframework.boot.autoconfigure.EnableAutoConfiguration=XXXXX的作用是什么?

org.springframework.boot.autoconfigure.EnableAutoConfigurationXXXXXXX 这一配置项在 Spring Boot 项目中的作用如下&#xff1a; 自动配置类的指定&#xff1a; 这一配置将 EnableAutoConfiguration 设置为 cn.geek.javadatamanage.config.DataManageAutoConfiguration&…

解决Invalid or unsupported by client SCRAM mechanisms(dbeaver)

在用工具&#xff08;dbeaver&#xff09;链接Opengauss数据库的时候&#xff0c;报出标题的错误。原因为驱动不正确。 驱动下载地址&#xff1a;https://opengauss.org/zh/download/ 下载完的包 &#xff0c;解压后&#xff0c;里面应该有两个jar 包,使用postgresql.jar dbe…

什么是CAP理论及应用场景,为什么只能进行3选2

在理论计算机科学中&#xff0c;CAP定理&#xff08;CAP theorem&#xff09;&#xff0c;又被称作布鲁尔定理&#xff08;Brewers theorem&#xff09;&#xff0c;它指出对于一个分布式计算系统来说&#xff0c;不可能同时满足以下三点&#xff1a; 1、 一致性&#xff08;C…

计算机网络之广域网

广域网特点: 主要提供面向通信的服务&#xff0c;支持用户使用计算机进行远距离的信息交换。 覆盖范围广,通信的距离远&#xff0c;需要考虑的因素增多&#xff0c; 线路的冗余、媒体带宽的利用和差错处理问题。 由电信部门或公司负责组建、管理和维护&#xff0c;并向全社会…