首页 > 其他分享 >仿猫眼电影购票页面

仿猫眼电影购票页面

时间：2024-05-28 12:29:40浏览次数：23  
标签：span attr 标签 购票 座位 猫眼 data ticket 页面

实现效果

首先是最上面流程线的布局，用到了bootstrap，使用前先引入bootstrap

<!-- 流程线 -->
<div class="container" id="app">
	<div class="order-progress-bar">
		<div class="step first done">
			<span class="step-num">1</span>
			<div class="bar"></div>
			<span class="step-text">选择影片场次</span>
		</div>
		<div class="step done">
			<span class="step-num">2</span>
			<div class="bar"></div>
			<span class="step-text">选择座位</span>
		</div>
		<div class="step">
			<span class="step-num">3</span>
			<div class="bar"></div>
			<span class="step-text">14分钟内付款</span>
		</div>
		<div class="step last">
			<span class="step-num">4</span>
			<div class="bar"></div>
			<span class="step-text">影院取票观影</span>
		</div>
/div>

然后是座位选择示例的排布，座位图标是设置了不同的座位状态背景，共四个状态，本篇文章中的座位表未用到情侣座位

首先是最左侧的行号，可以根据自己的需要增加或是删除"span"标签就可以改变总行数

<!-- 行号 -->
<div class="row-id-container">
	<span class="row-id">1</span>
	<span class="row-id">2</span>
	<span class="row-id">3</span>
	<span class="row-id">4</span>
	<span class="row-id">5</span>
	<span class="row-id">6</span>
	<span class="row-id">7</span>
	<span class="row-id">8</span>
	<span class="row-id">9</span>
	<span class="row-id">10</span>
	<span class="row-id">11</span>
	<span class="row-id">12</span>
</div>

然后是中间的座位，这里通过给每个座位设置不同自定义data属性，同样座位的地方也是贴的背景，不同状态的座位对应不同的背景，这块儿通过增删类来实现变化，下面以第一排为例

  1. ".seat":代表座位
  2. ".sold":代表座位已出售，在座位表中为红色
  3. ".empty":代表该地方无座位，在座位表中无背景
  4. ".selected":代表已选中座位，在座位表中为绿色
  5. "selectable":代表该座位可选，在座位表中为白色
  6. "data-column":代表列
  7. "data-row"：对应行
  8. "data-st='E'":表示该座位为空，与类".empty"搭配使用
  9. "data-st='LK'":表示该座位已出售，与类".sold"搭配使用
<div class="seats-wrapper">
	<div class="row">
		<span class="seat selectable" data-column="14" data-row="1"></span>
		<!-- 表示最左边的座位已选中 -->
		<span class="seat selected" data-column="13" data-row="1"></span>
		<!-- 表示从左向右数，倒数第三个座位为空 -->
		<span class="seat empty" data-column="" data-row="1" data-st="E"></span>
		<span class="seat selectable" data-column="11" data-row="1"></span>
		<span class="seat selectable" data-column="10" data-row="1"></span>
		<span class="seat selectable" data-column="9" data-row="1"></span>
		<span class="seat selectable" data-column="8" data-row="1"></span>
		<span class="seat selectable" data-column="7" data-row="1"></span>
		<span class="seat selectable" data-column="6" data-row="1"></span>
		<span class="seat selectable" data-column="5" data-row="1"></span>
		<span class="seat selectable" data-column="4" data-row="1"></span>
		<span class="seat selectable" data-column="3" data-row="1"></span>
		<span class="seat selectable" data-column="2" data-row="1"></span>
		<!-- 表示座位表最右边一个位置已出售 -->
		<span class="seat sold" data-column="1" data-row="1" data-st="LK"></span>
	</div>
</div>

座位表的排布可根据需要自行布局

接下来是右侧影片详情，会显示用户信息和选座信息

<div class="side">
			<div class="movie-info clearfix">
				<div class="poster">
					<img src="../images/now-1.jpg">
				</div>
				<div class="content">
					<p class="name text-ellipsis">末路狂花钱</p>
					<div class="info-item">
						<span>类型 :</span>
						<span class="value">喜剧</span>
					</div>
					<div class="info-item">
						<span>时长 :</span>
						<span class="value">106分钟</span>
					</div>
				</div>
			</div>

			<div class="show-info">
				<div class="info-item">
					<span>影院 :</span>
					<span class="value text-ellipsis">影城</span>
				</div>
				<div class="info-item">
					<span>影厅 :</span>
					<span class="value text-ellipsis">影厅</span>
				</div>
				<div class="info-item">
					<span>版本 :</span>
					<span class="value text-ellipsis">国语2D</span>
				</div>
				<div class="info-item">
					<span>场次 :</span>
					<span class="value text-ellipsis screen">今天 5月24 18:05</span>
				</div>
				<div class="info-item">
					<span>票价 :</span>
					<span class="value text-ellipsis">￥47/张</span>

				</div>
			</div>
			<!-- 电影票信息 -->
			<div class="ticket-info">
				<!-- 未选座时显示的div -->
				<div class="no-ticket">
					<p class="buy-limit">座位：一次最多选6个座位,三张以上享九折优惠！</p>
					<p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
				</div>
				<!-- 选座后显示的div -->
				<div class="has-ticket" style="display:none">
					<span class="text">座位：</span>
					<!-- 右侧显示已选座位 -->
					<div class="ticket-container" data-limit="5"></div>
				</div>
				<!-- 电影票总价 -->
				<div class="total-price">
					<span>总价 :</span>
					<span class="price">0</span>
					<span class="discount">0</span>
				</div>

			</div>
			<!-- 订票人信息 -->
			<div class="confirm-order">
				<div class="cellphone">
					<span>手机号 :</span>
					<span class="phone-num">152****1506</span>
				</div>
				<div class="confirm-btn disable" data-act="confirm-click">确认选座</div>

			</div>
		</div>

未选座时效果——————————选座后效果————————————

接下来是JS部分

首先是当用户点击已选中的座位时，该座位状态由选中变为可选，这部分主要是通过jquery的toggleClass添加或删除类来实现

// 当座位处于选中状态时
	if ($(this).hasClass("selected")) {
        // 通过toggleClass添加或删除类
	    $(this).toggleClass("selected");
		$(this).toggleClass("selectable");
					
	}

如果座位被选中，则在右侧显示座位标签 

// 在右侧座位出添加座位标签，展示座位序号
	var $span_tag = $("<span></span>");
// 给座位标签添加类ticket
	$span_tag.addClass("ticket");
// 为座位标签增添属性和属性值，用于查找（通过data查找数据）座位并显示座位序号
	$span_tag.attr("data-row", $(this).attr('data-row'));
	$span_tag.attr("data-column", $(this).attr('data-column'));
    $span_tag.attr("data-index", $(this).attr('data-row') + "-" + $(this).attr('data-column'));
// 标签呈现的样式
	$span_tag.html($(this).attr('data-row') + '排' + $(this).attr('data-column') + '座');
// 在右侧插入座位标签
    $(".ticket-container").append($span_tag);

当座位被取消时，右侧座位标签被删除

// 获取所有类ticket，该部分是右侧已选座位标签
	var tickets = document.querySelectorAll(".ticket");
// 通过查询属性'data-row'和'data-column'来确认选中的位置序号
	var selectd = $(this).attr('data-row') + "-" + $(this).attr('data-column');
// 当座位属性'data-index'处于选中状态时，清除右侧座位标签
	for (var i = 0; i < tickets.length; i++) {
		if (tickets[i].getAttribute('data-index') == selectd) {
				document.querySelector(".ticket-container").removeChild(tickets[i]);
				break;
			}
		}

 如果用户点击了为空或是已出售的座位，则点击无效

// 若座位已售或该位置无座，用户点击无效
if ($(this).attr('data-st') == 'E' || $(this).attr('data-st') == 'LK') {
	return;
}

同样，用户可以通过删除右侧座位标签来取消选座，当用户点击座位标签时，该类为".ticket".的标签span会被删除，同时将座位回复为可选状态

// 给座位标签添加类ticket
	$span_tag.addClass("ticket").click(function() {
/ 获取座位标签的data-index属性
	if($(".ticket").length<4){
		$(".discount").css("display","none");
	}
	var ticketIndex = $(this).attr('data-index');
	var seat = $('.seats-wrapper span[data-row="' + $(this).attr('data-row') +'"][data-column="' + $(this).attr('data-column') + '"]');
	if (seat.hasClass("selected")) {
		eat.toggleClass("selected").toggleClass("selectable"); // 更新座位状态为可选
		$(this).remove(); // 删除侧边栏中的座位标签
		priceTotal(); // 重新计算价格
		seatDisplay(); // 更新座位显示状态
		}
});

电影票的总价，使用单价*类为".ticket".的标签span的长度，长度代表电影票张数，用户每次点击左侧座位表或是右侧座位标签则调用相应函数，我在这加了个折扣，表示当电影票>=3时，会打九折，不需要的可以直接删除

function priceTotal() {
	//计算总价
	if($(".ticket").length>=3){
		total_discount = Math.ceil($(".ticket").length * pricePerTicked*0.9);
		total_bill =$(".ticket").length * pricePerTicked;
		$('.discount').css({"display":"block","margin-left":"100px","margin-top":"-25px"});
		$('.price').html(total_discount);
		$('.discount').html("(￥"+total_bill+")");
	}else{
		total_bill =$(".ticket").length * pricePerTicked;
		$('.price').html(total_bill);
	}
	
}

最后就是右侧座位那块的标签显示，根据座位状态来更改"display",具体表示哪一个标签可以看看右侧影片详情的布局，一看就懂！

function seatDisplay() {
	if ($(".ticket").length > 0) {
		$('.confirm-btn').removeClass('disable');
		$('.no-ticket').css("display", "none");
		$('.has-ticket').css("display", "block");
	} else {
		$('.confirm-btn').addClass('disable');
		$('.no-ticket').css("display", "block");
		$('.has-ticket').css("display", "none");
	}
}

JS完整代码，JQuery用的是1.11.3，只要大于1.9应该都没问题,要是有错误的地方，欢迎批评指正，另外还有其他的办法，那个不是用JQuery写的，可以去主页翻一下，有需要源码的可以私信或者评论，免费分享

$(function() {

	$(".location").hover(function() {
		$(".hid").show();
	}, function() {
		$(".hid").hide();
	});
	$(".loging").hover(function() {

		$(".hid1").show();
	}, function() {
		$(".hid1").hide();
	});
	$(".seats-wrapper span").bind("click", function() {
		// 若座位已售或该位置无座，用户点击无效
		if ($(this).attr('data-st') == 'E' || $(this).attr('data-st') == 'LK') {
			return;
		} else {
			// 当座位处于选中状态时
			if ($(this).hasClass("selected")) {
				if($(".ticket").length<4){
					$(".discount").css("display","none");
				}
				// 通过toggleClass添加或删除类
				$(this).toggleClass("selected");
				$(this).toggleClass("selectable");
				// 获取所有类ticket，该部分是右侧已选座位标签
				var tickets = document.querySelectorAll(".ticket");
				// console.log(tickets);
				// 通过查询属性'data-row'和'data-column'来确认选中的位置序号
				var selectd = $(this).attr('data-row') + "-" + $(this).attr('data-column');
				// 当座位属性'data-index'处于选中状态时，清除右侧座位标签
				for (var i = 0; i < tickets.length; i++) {
					if (tickets[i].getAttribute('data-index') == selectd) {
						document.querySelector(".ticket-container").removeChild(tickets[i]);
						// console.log(tickets[i]);
						break;
					}
				}
				// 计算总价
				priceTotal();
				// 当座位处于可选状态时
			} else if ($(this).hasClass("selectable")) {
				// 当用户选座超过六张弹出提示
				if ($(".ticket").length > 6) {
					alert('一次最多买6张');
					return;
				}
				$(this).toggleClass("selectable");
				$(this).toggleClass("selected");
				// 在右侧座位出添加座位标签，展示座位序号
				var $span_tag = $("<span></span>");
				// 给座位标签添加类ticket
				$span_tag.addClass("ticket").click(function() {
					// 获取座位标签的data-index属性
					if($(".ticket").length<4){
						$(".discount").css("display","none");
					}
					var ticketIndex = $(this).attr('data-index');
					var seat = $('.seats-wrapper span[data-row="' + $(this).attr('data-row') +
						'"][data-column="' + $(this).attr('data-column') + '"]');
					if (seat.hasClass("selected")) {
						seat.toggleClass("selected").toggleClass("selectable"); // 更新座位状态为可选
						$(this).remove(); // 删除侧边栏中的座位标签
						priceTotal(); // 重新计算价格
						seatDisplay(); // 更新座位显示状态
					}
				});


				// 为座位标签增添属性和属性值，用于查找（通过data查找数据）座位并显示座位序号
				$span_tag.attr("data-row", $(this).attr('data-row'));
				$span_tag.attr("data-column", $(this).attr('data-column'));
				$span_tag.attr("data-index", $(this).attr('data-row') + "-" + $(this).attr(
					'data-column'));
				// 标签呈现的样式
				$span_tag.html($(this).attr('data-row') + '排' + $(this).attr('data-column') + '座');
				// 在右侧插入座位标签
				$(".ticket-container").append($span_tag);

				priceTotal();
			}
		}
		seatDisplay();

	});


	var total_bill = 0; //总价
	var pricePerTicked = 47; //单价

	function seatDisplay() {
		if ($(".ticket").length > 0) {
			$('.confirm-btn').removeClass('disable');
			$('.no-ticket').css("display", "none");
			$('.has-ticket').css("display", "block");
		} else {
			$('.confirm-btn').addClass('disable');
			$('.no-ticket').css("display", "block");
			$('.has-ticket').css("display", "none");
		}
	}

	function priceTotal() {
		//计算总价
		if ($(".ticket").length >= 3) {
			total_discount = Math.ceil($(".ticket").length * pricePerTicked * 0.9);
			total_bill = $(".ticket").length * pricePerTicked;
			$('.discount').css({
				"display": "block",
				"margin-left": "100px",
				"margin-top": "-25px"
			});
			$('.price').html(total_discount);
			$('.discount').html("(￥" + total_bill + ")");
		} else {
			total_bill = $(".ticket").length * pricePerTicked;
			$('.price').html(total_bill);
		}

	}
})

标签：span,attr,标签,购票,座位,猫眼,data,ticket,页面
From： https://blog.csdn.net/m0_74937643/article/details/139204078

相关文章

  • 动态渲染之vue页面向组件间传值
    ==Vue页面文件==//vue文件引入组件importceliangjulifrom"@/components/Map/celiangjuli.vue";//使用组件key：celiangMethod（任意名）<celiangjuli:celiangMethod="celiangMethod"></celiangjuli>////定义初始化valueletceliangMethod=ref();//......
  • React后台管理（十二）-- 页面常用hook封装 --- useSearch搜索封装
    文章目录前言一、useSearch自定义hook封装1.核心代码（1）hook文件代码+详细注释（2）使用到的store说明（3）使用到的config文件代码（4）使用到的白名单pageWhite文件代码2.使用方式（1）layout布局组件->监听并记录路由（2）搜索按钮组件->记录列表搜索的动作类型：搜索|重置（3）分页组件->记......
  • ios系统上h5页面播放audio标签声音有延迟问题处理
    原文链接https://www.cnblogs.com/yalong/p/18214816背景app内嵌了一个H5页面，页面有个需求是点击某些按钮就触发声音，于是就使用了audio标签，但是有个问题就是在ios上，点击声音会有短时间的延迟，然后才播放声音找了好几种方案总算解决了方案一click事件改为mouseup事件因为移动......
  • 【python】自动化登录学习通页面-多表单切换
    fromseleniumimportwebdriverfromselenium.webdriver.common.byimportByfromselenium.common.exceptionsimportStaleElementReferenceExceptionfromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_cond......
  • react解决电脑分辨率及缩放导致页面变形的问题
    此处借鉴Vue3解决电脑分辨率及缩放导致页面变形的问题-CSDN博客：新建devicePixelRatio.js：/***@description校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%***/classDevicePixelRatio{ constructor(){ } //获取系统类型 _get......
  • 创建HTML简单页面
    一.<!--在vscode中用html语言编写一个html页面网站-->   <!--创建的页面主题为：端午那些事-->1.代码如下：2.上面的代码显示出的页面如下：3.因为不能发视频，所以粗糙地截了下图。解释：上面的带下划线的字体是可以跳转页面的，开始的五行是可以在通过锚点来跳转......
  • 自适应/调整图片大小为页面大小
    SubResizeImagesToPageWidth()Application.ScreenUpdating=True'获取当前文档Setdoc=ActiveDocument'获取页面宽度并减去页边距Withdoc.PageSetuppgWidth=.PageWidth-.LeftMargin-.RightMarginEndWith'......
  • React后台管理（九）-- 页面开发前准备---Outlet布局组件封装
    文章目录前言一、组件源码+解析如下二、页面使用方式三、效果展示总结前言本文主要讲Outlet子路由渲染区域—>结构布局的封装。其中涉及的全局搜索hook函数，后面会单独拎出来讲，这期可先忽略，关注布局即可。一、组件源码+解析如下//@/layout/list/index.jsximport......
  • 基于python+django框架旅游景区景点购票系统设计与实现(源码+LW+安装+基础课)
     博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、P......
  • html中如何改变value返回值在页面的位置
    如果您想在HTML页面上更改一个元素（如 <div> 或 <span>）的 value 返回值或者内容的位置，通常可以通过JavaScript来实现。以下是一种常见的方法：HTML结构：首先在HTML中定义一个元素，例如 <div>，并为其设置一个 id 以便JavaScript可以选择该元素进行操作。<!DOCTYPE......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99