js 定义二维数组并初始化

最新推荐文章于 2024-10-03 17:13:29 发布

桃根仙

最新推荐文章于 2024-10-03 17:13:29 发布

阅读量2.5w

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/taotaobaobei/article/details/86451375

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近一朋友搞安卓的，需要做个电影院选作位的 VIEW 原生安卓找不到对应的实现方法，只好求助于我用前端html5+js实现。搞了半夜，附上劳动成果。给需要用js二维数组和二维数组初始化的童鞋当demo用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>电影院选座位</title>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>

		<div class="wrapper">
			<!--<div class="ract" style="left:0px;top:0px;">
		</div>		
		<div class="dialog"><span></span>A1桌</div>-->
		</div>

		<script type="text/javascript">
			$(function() {
				init();

				function init() {
					var pos = new Array();
					for(var i = 0; i < 9; i++) {
						pos[i] = new Array();
						for(var j = 0; j < 15; j++) {
							pos[i][j] = 0; //0表示只有一个空的红圈
						}
					}

					pos[2][4] = 1;
					pos[2][5] = 1;

					pos[3][0] = -1;
					pos[4][0] = -1;
					pos[5][0] = -1;

					pos[3][1] = -1;
					pos[4][1] = -1;
					pos[5][1] = -1;
					pos[4][2] = -1;

					pos[3][14] = -1;
					pos[4][14] = -1;
					pos[5][14] = -1;

					var box = $('.wrapper');

					for(var i = 0; i < pos.length; i++) {
						for(var j = 0; j < pos[i].length; j++) {
							if(pos[i][j] == 0) { //0 表示显示红背景的空心圈

								/*打开这几行代码可以显示提示对话框*/
								/*if(i % 2 == 0) {
									box.append('<div class="ract" style="left:' + (i * 64) + 'px;top:' + (j * 64) + 'px;"></div>      <div class="dialog" style="left:' + (i * 64 + 31) + 'px;top:' + (j * 64) + 'px;"><span style="left:;top:;"></span>A1桌</div>     ');
								} else {
									box.append('<div class="ract" style="left:' + (i * 64) + 'px;top:' + (j * 64 + 32) + 'px;"></div>      <div class="dialog" style="left:' + (i * 64 + 31) + 'px;top:' + (j * 64 + 32) + 'px;"><span style="left:;top:;"></span>A1桌</div>     ');
								}*/

								if(i % 2 == 0) {
									box.append('<div class="ract" style="left:' + (i * 64) + 'px;top:' + (j * 64) + 'px;"></div>          ');
								} else {
									box.append('<div class="ract" style="left:' + (i * 64) + 'px;top:' + (j * 64 + 32) + 'px;"></div>      ');
								}

							} else if(pos[i][j] == 1) { //1 表示显示座位有人占用
								box.append('<div class="ract" style="background: black;left:' + (i * 64 + 31) + 'px;top:' + (j * 64) + 'px;"></div>');
							} else if(pos[i][j] == -1) { //-1 表示不做任何操作

							}
						}
					}
				}

			})
		</script>
	</body>

</html>

样式文件：

body {
	height: 100%;
	width: 100%;
	background-image: url(../images/1.png);
	background-size: cover;
}

.wrapper {
	position: relative;
	/*	margin: 60px 0 0 40px;*/
	margin: 0 auto;
	max-width: 640px;
}

.ract {
	width: 18px;
	height: 18px;
	border-radius: 100%;
	border: 1px solid red;
	background: red;
	position: absolute;
}

.dialog {
	width: 33px;
	height: 20px;
	left: 29px;
	top: 0px;
	position: absolute;
	background: #F0AD4E;
	color: #fff;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
}

.dialog span:before {
	position: absolute;
	left: -24px;
	top: 2px;
	content: '';
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid transparent;
	border-right: 12px solid #F0AD4E;
}

.u-tri:before {
	position: absolute;
	left: -24px;
	top: 4px;
	content: '';
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid transparent;
	border-right: 12px solid green;
}

运行效果图：