JS实现将二维数组生成到页面上

前言

之前没说过数组，现在来写一下数组

CSS

span {
    border:2px solid skyblue;
    width:30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 2em;
}
			
.spanQiang {
    background:darkgray;
}
			
.spanRed {
    background:red;
}
			
.spanGreen {
    background:green;
}
.spanPath {
    background:blueviolet;

HTML

JS

  var Map = [
				[0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 1, 0],
				[0, 0, 0, 3, 1, 2, 1, 0],
				[0, 0, 0, 0, 1, 1, 1, 0],
				[0, 0, 0, 0, 0, 0, 0, 0],
				[0, 0, 0, 0, 0, 0, 0, 0],
			]
			//0路,1墙,2目标,3玩家,4算出的最短路径
 
			//生成地图
			function CreateMap(DOM) {
				document.querySelectorAll(".Map")[0].innerHTML = "";
				console.log(Map, XYInfo);
				StartTime();
				for (var i = 0; i < Map.length; i++) {
					if (Map[i].length > 0) {
						for (var z = 0; z < Map[i].length; z++) {
							if (Map[i][z] == 1) {
								document.querySelectorAll(".Map")[0].innerHTML += "" + Map[i][z] + "";
							} else if (Map[i][z] == 2) {
								document.querySelectorAll(".Map")[0].innerHTML += "" + Map[i][z] + "";
							} else if (Map[i][z] == 3) {
								document.querySelectorAll(".Map")[0].innerHTML += "" + Map[i][z] + "";
							} else if (Map[i][z] == 4) {
								document.querySelectorAll(".Map")[0].innerHTML += "" + Map[i][z] + "";
							} else {
								document.querySelectorAll(".Map")[0].innerHTML += "" + Map[i][z] + "";
							}
 
							//换行
							if (z == Map[i].length - 1) {
								document.querySelectorAll(".Map")[0].innerHTML += "
";
							}
 
							//最后一个
							if (z == Map[i].length - 1 && i == Map.length - 1) {
								StopTime(DOM);
							}
						}
					}
 
				}
			}

效果

点击按钮

页面效果

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进