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

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

CSS

span {
				border:2px solid skyblue;
				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

<form>
			<input type="button" value="创建地图" onclick="CreateMap('.CreateTime')" />
		</form>
		<div class="Map">
		</div>

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 += "<span class='spanQiang'>" + Map[i][z] + "</span>";
							} else if (Map[i][z] == 2) {
								document.querySelectorAll(".Map")[0].innerHTML += "<span class='spanRed'>" + Map[i][z] + "</span>";
							} else if (Map[i][z] == 3) {
								document.querySelectorAll(".Map")[0].innerHTML += "<span class='spanGreen'>" + Map[i][z] + "</span>";
							} else if (Map[i][z] == 4) {
								document.querySelectorAll(".Map")[0].innerHTML += "<span class='spanPath'>" + Map[i][z] + "</span>";
							} else {
								document.querySelectorAll(".Map")[0].innerHTML += "<span>" + Map[i][z] + "</span>";
							}

							//换行
							if (z == Map[i].length - 1) {
								document.querySelectorAll(".Map")[0].innerHTML += "<br />";
							}

							//最后一个
							if (z == Map[i].length - 1 && i == Map.length - 1) {
								StopTime(DOM);
							}
						}
					}

				}
			}

效果
点击按钮

页面效果

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