JS电影院在线选座简化案例

最新推荐文章于 2024-09-14 14:28:57 发布

zhouzhurong

最新推荐文章于 2024-09-14 14:28:57 发布

阅读量3.1k

点赞数 1

文章标签： javascript html 前端 ui

本文链接：https://blog.csdn.net/CQZHOUZR/article/details/120052972

版权

不考虑后端数据库，只考虑前端设计。

假设单个影厅单场次，用三张小图片表示座位：空座已售选座。

用二维数组保存座位信息，数组元素0-空座，1-已售，2-选座。用createElement、appendChild根据二维数组动态生成选座图，赋予座位图片onclick事件处理选座。运行结果如下：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<script>	
	var seatmap=[[0,1,0,0],[0,0,1,0],[0,0,0,0],[0,0,0,0]];
	window.onload = function(){
		var roomNode = document.getElementById("room");
		for(i=0;i<4;i++){
			var divNode = document.createElement('div');
			divNode.id="row"+i;
			roomNode.appendChild(divNode);
			for(j=0;j<4;j++){
				addSeatImg(i,j);}}}
	function pick_seat(i,j){		
		var imgObj = document.getElementById("img"+i+"_"+j);		
		if (seatmap[i][j]==1)	//如果座位已售，则不可选
			return 0;
		else if (seatmap[i][j]==0){
			imgObj.src="images/已选.gif";
			seatmap[i][j]=2;}
		else{
			seatmap[i][j]=0
			imgObj.src="images/空座.gif";}}
	function addSeatImg(i,j){		
		var imgNode = document.createElement("img");//创建一个图片
		if( seatmap[i][j]==1)	//初始化时只有空座和已售两种情况
			imgNode.src = "images/已卖.gif";//设置图片节点的src属性
		else
			imgNode.src = "images/空座.gif";
		imgNode.id="img"+i+"_"+j;
		imgNode.style.margin = 'auto 4px';  //设置座位横向间隔
		imgNode.title = "座位号"+(i+1)+"排"+(j+1)+"号";//设置图片节点的title属性
		imgNode.setAttribute("onclick","pick_seat("+i+","+j+")");  		
		var divNode = document.getElementById("row"+i);
		divNode.appendChild(imgNode);}//追加图片节点到div层中
</script></head><body>
<div id="room" class="testDiv"></div></body></html>