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

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

<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);
}
}
} }
}

效果
点击按钮

页面效果

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

JS实现将二维数组生成到页面上的更多相关文章

  1. Highcharts使用二维数组生成图表

    Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...

  2. egret之一维,二维数组

    一维数组转换成二维数组下标公式: 行=下标/二维数组列数 列=下标%二维数组列数+1 ] + ); ] + ); 二维数组转一维数组: 下标=(二维数当前行-1)*列数+二维数当前列-1: let i ...

  3. js 如何生成二维数组

    想了几种方法都不能很好的,用js定义二维数组.这种定义,指的是:定义按需确认数组大小. 网上看了下,都是用for循环创建,大小必须提前设定.不是我想要的.(感觉不能和php一样,真是麻烦!) 先贴出代 ...

  4. js二维数组与字符串

    1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...

  5. C#/JS 获取二维数组组合

    C#获取二维数组组合 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  6. js 二维数组定义

    1.二维数组声明方式是下面这样的: var images=new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 images[i]=new ...

  7. thinkphp foreach循环生成二维数组的方法

    先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...

  8. C语言动态生成二维数组

    # 动态创建二维数组示例 #include "stdlib.h" #include "stdio.h" #include <malloc.h> in ...

  9. 将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件

      将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件import java.io.File;import java.io.FileOutputStre ...

随机推荐

  1. java 多线程-3

    十.同步机制解决Thread继承安全问题 创建三个窗口买票,共100张票.用继承来实现 方式一:同步代码块 public class RunMainExtends { public static vo ...

  2. Dell服务器R710修改iDRAC密码

    此方法需重启,重启之前记住保存 重要数据,停止服务器相关服务.所以此操作最好在还未装系统前先设置好. 开机(重启)持续按CTRL+E进入iDRAC设置界面,选择意思为恢复默认的选项,风扇会非常的响,之 ...

  3. 确成硅化+恒力+苏大文正节点2 oracle ora-4030 错误pga version:11204

    Errors in file /u01/app/oracle/oracle/diag/rdbms/orcl/orcl/trace/orcl_j000_61543.trc (incident=18009 ...

  4. Java操作Elasticsearch 之 [Java High Level REST Clientedit]

    1. 简述 Elasticsearch 是基于 Lucene 开发的一个分布式全文检索框架,向 Elasticsearch 中存储和从 Elasticsearch 中查询,格式是json. 向 Ela ...

  5. JAVA运行环境 和 Java Applet的运行环境 的区别

    Java小程序,也就是Java Applet,可以在Web浏览器中运行.Java Applet必须以<applet>脚本的形式嵌入到HTML页面中,才能在web浏览器中运行. 之前总以为本 ...

  6. 浅谈Prufer序列

    \(\text{Prufer}\)序列,是树与序列的一种双射. 构建过程: 每次找到一个编号最小的叶子节点\(Leaf\),将它删掉,并将它所连接的点的度数\(-1\),且加入\(\text{Pruf ...

  7. IDEA2020.2的破解

    第一种方式:http://code.39sd.cn/ 直接获取二维码: 第二种:下载破解工具(本方法只是提供个人学习使用) 1.下载2020.2的idea 链接:https://pan.baidu.c ...

  8. 九、Python+Selenium模拟登录

    研究QQ登录规则的话,得分析大量Javascript的加密解密,比较耗时间.自己也是练习很少,短时间成功不了.所以走了个捷径. Selenium是一个WEB自动化测试工具,它运行时会直接实例化出一个浏 ...

  9. 一个漂亮的JavaScript“警告”替代品

    下载 一个漂亮的JavaScript"警告"替代品 安装 $ npm安装-节省sweetalert 使用 从"sweetalert"进口swal; 横波测井(& ...

  10. ansible-playbook定义变量与使用

    1. ansible-playbook变量定义与使用 命令行 在Inventory中定义 在Playbook中定义 在Role中定义 注册变量(register) 系统信息变量(facts) 2. 在 ...