js 定义二维数组并初始化

最新推荐文章于 2024-06-12 19:54:30 发布
最新推荐文章于 2024-06-12 19:54:30 发布
阅读量2.5w 收藏 2
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taotaobaobei/article/details/86451375
版权

最近一朋友搞安卓的，需要做个电影院选作位的 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;
}

 运行效果图：

 

桃根仙
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 定义初始化数组函数
12-09
方法一、js数组的定义与初始化 定义一维数组 ...定义二维数组 方法1 var _TheArray = new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 TheArray[i]=new Array(); //在声明二维 for
关于Js的二维数组定义和方法
04-25
关于JAVASCRIPT中的关于二维码的数组的定义与排序方法！！！名师讲解.
js二维数组定义和初始化的三种方法总结
12-10
方法一：直接定义并且初始化，这种遇到数量少的情况可以用 var _TheArray = [[“0-1″,”0-2”],[“1-1″,”1-2”],[“2-1″,”2-2”]] 方法二：未知长度的二维数组 var tArray = new Array(); //先声明一维 for(var k=0;k<i;k++){ //一维长度为i,i为变量，可以根据实际情况改变 tArray[k]=new Array(); //声明二维，每一个一维数组里面的一个元素都是一个数组； for(var j=0;j<p;j++){ //一维数组里面每个元素数组可以包含的数量p，p也是一个变量； tArray[k][
js初始化二维数组
iwanf_lee的博客
11-13 4185
以前用javascript初始化二维数组的时候，是 //javascript let arr = []; let m = 5; let n = 4; for(let i=0;i<m;i++){ arr[i]=[]; for(let j=0;j<n;j++){ arr[i][j]=0; } } 现在定义 js二维数组可以用数组方法 const arr = new Array(m).fill(0).map(v => new Array(n).fill(0));
JavaScript的数组（一维数组、二维数组、数组常用的方法调用）
最新发布
分享式获得也是一种学习的态度
06-12 921
定义的语法有三种方式如下先声明对象在填充值。
JS定义数组，初始化
#维多利亚的秘密#
03-19 6914
定义一维数组   方法1： var _TheArray = new Array);/定义 _TheArray[0]="1"; _TheArray[1]="2"; _TheArray[2]="3";//初始化   方法2： var _TheArray = new Array("1","2","3");//直接定义并初始化   定义二维
js中二维数组的初始化
weixin_30873847的博客
12-30 329
在编程过程中，很多情况下（涉及到坐标、层级操作）我们都会用到二维数组，下面介绍介绍几种二维数组初始化的方法: 方法一、直接定义并且初始化，这种情况适用于数量和值已知的数组： var arr=[["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]; 方法二、动态创建并初始化： var arr=new Array(); //声...
定义JavaScript二维数组采用定义数组的数组来实现
12-09
由于JavaScript没有内置的直接方式来定义二维数组，我们通常通过创建数组的数组来实现这一概念。这种方式允许我们在处理多维数据时具有较高的灵活性。 在给定的示例中，我们看到如何定义并初始化一个8x8的二维数组...
JS 初始化一个二维数组
编程酸菜鱼的博客
08-18 1268
JS初始化一个二维数组 初始化一个二维数组 定义二维数组可以通过定义数组的数组实现 var arr = new Array(n); for(var i = 0;i < n;i++){ arr[i] = new Array(m); } 但是这种方法我在使用中会报错：cannot read property ‘0’ of undefined，即使在循环中将每一个值都初始化，仍然在m和n不相等时会出现上述错误（有时大于时错误，有时小于时错误，但一定会出错），推测是定义时没将数组中所有的值初始化完成
JavaScript 初始化二维数组的方法
gengziyou的博客
01-10 643
写题时经常遇到需要初始化二维数组的情况 我目前用过三种方法： //初始化 n x m 的二维数组 //1. const arr = Array.from({length: n}, () => new Array(m).fill(0)); //2. const arr = [...Array(n)].map(() => Array(m).fill(0)); //3. const arr = new Array(n).fill(0).map((v) => new Array(m).fill
js 初始化时如何建立二维数组
ljl_xyf的专栏
01-12 194
  建立二维数据js数据的代码如下：   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;js 初始化时建立二维数组&lt;/TITLE&gt; &lt;META NAME="Generator&q
用JavaScript初始化二维数组
STATICHIT静砸的博客
09-19 249
对于c或java来说，初始化二维数组很简单，但js有些不一样。
盘点js二维数组定义和初始化的三种方法
xinyuerr的博客
09-19 1054
结果是tArray[a]中收到的是后面一个数组的值，matArray[a]的内容被忽略的，如果换一个位置，matArray[a]在后面，则传入的是addArray[a]的值。这两天做项目时，要通过js传递一个带有字符串键名的二维数组，可是传递到后台，却得到了false，使用了很多种方法都不行，今天特地来介绍一下：js 数组初始化问题；方法三：在这之前，以上两者方法都有问题，方法二，每次定义都初始化了，虽然后面可以动态修改，但是还是不方法。可以看出上面的b[0]=[1,2]是可以用的。
JS声明二维数组常见办法
莫兮的博客
02-25 1981
JS声明二维数组常见办法 目录 文章目录前言`new Array`和`fill``fill`灵活插入`for`笨办法 前言 目前论坛常见的办法代码质量奇差，因此针对这个问题进行整理 new Array和fill console.log(new Array(20).fill(new Array(10).fill(0))); 结果： 此办法将会生成二维数组 fill灵活插入 console.log(new Array(20).fill([1,2,3],0,2)); 将会在0-2插入[1,2,3
js二维数组的定义
weixin_30810239的博客
04-07 75
js数组的定义 var auto_array=new Array(10); for(i=0;i<auto_array.length;i++) auto_array[i]=new Array(2) auto_array[0][0]=1; auto_array[0][1]=2; auto_array[1][0]=3; auto_ar...
JS一行代码实现二维数组的声明与初始化（3种方法）
qq_30916621的博客
04-09 1635
JS一行代码实现二维数组的声明与初始化（3种方法）
【JavaScript】定义空的二维数组
暮色年华的博客
12-21 1177
javaScript创建数组
js定义二维数组初始化
09-06
在JavaScript中，有多种方法可以定义和初始化二维数组。 方法一: 直接定义并初始化 可以使用以下语法直接定义并初始化一个二维数组： var _TheArray = new Array(["1","2","3"], ["4","5","6"], ["7","8","9"]); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值