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
<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实现将二维数组生成到页面上的更多相关文章
- Highcharts使用二维数组生成图表
Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...
- egret之一维,二维数组
一维数组转换成二维数组下标公式: 行=下标/二维数组列数 列=下标%二维数组列数+1 ] + ); ] + ); 二维数组转一维数组: 下标=(二维数当前行-1)*列数+二维数当前列-1: let i ...
- js 如何生成二维数组
想了几种方法都不能很好的,用js定义二维数组.这种定义,指的是:定义按需确认数组大小. 网上看了下,都是用for循环创建,大小必须提前设定.不是我想要的.(感觉不能和php一样,真是麻烦!) 先贴出代 ...
- js二维数组与字符串
1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...
- C#/JS 获取二维数组组合
C#获取二维数组组合 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- js 二维数组定义
1.二维数组声明方式是下面这样的: var images=new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 images[i]=new ...
- thinkphp foreach循环生成二维数组的方法
先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...
- C语言动态生成二维数组
# 动态创建二维数组示例 #include "stdlib.h" #include "stdio.h" #include <malloc.h> in ...
- 将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件
将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件import java.io.File;import java.io.FileOutputStre ...
随机推荐
- java 多线程-3
十.同步机制解决Thread继承安全问题 创建三个窗口买票,共100张票.用继承来实现 方式一:同步代码块 public class RunMainExtends { public static vo ...
- Dell服务器R710修改iDRAC密码
此方法需重启,重启之前记住保存 重要数据,停止服务器相关服务.所以此操作最好在还未装系统前先设置好. 开机(重启)持续按CTRL+E进入iDRAC设置界面,选择意思为恢复默认的选项,风扇会非常的响,之 ...
- 确成硅化+恒力+苏大文正节点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 ...
- Java操作Elasticsearch 之 [Java High Level REST Clientedit]
1. 简述 Elasticsearch 是基于 Lucene 开发的一个分布式全文检索框架,向 Elasticsearch 中存储和从 Elasticsearch 中查询,格式是json. 向 Ela ...
- JAVA运行环境 和 Java Applet的运行环境 的区别
Java小程序,也就是Java Applet,可以在Web浏览器中运行.Java Applet必须以<applet>脚本的形式嵌入到HTML页面中,才能在web浏览器中运行. 之前总以为本 ...
- 浅谈Prufer序列
\(\text{Prufer}\)序列,是树与序列的一种双射. 构建过程: 每次找到一个编号最小的叶子节点\(Leaf\),将它删掉,并将它所连接的点的度数\(-1\),且加入\(\text{Pruf ...
- IDEA2020.2的破解
第一种方式:http://code.39sd.cn/ 直接获取二维码: 第二种:下载破解工具(本方法只是提供个人学习使用) 1.下载2020.2的idea 链接:https://pan.baidu.c ...
- 九、Python+Selenium模拟登录
研究QQ登录规则的话,得分析大量Javascript的加密解密,比较耗时间.自己也是练习很少,短时间成功不了.所以走了个捷径. Selenium是一个WEB自动化测试工具,它运行时会直接实例化出一个浏 ...
- 一个漂亮的JavaScript“警告”替代品
下载 一个漂亮的JavaScript"警告"替代品 安装 $ npm安装-节省sweetalert 使用 从"sweetalert"进口swal; 横波测井(& ...
- ansible-playbook定义变量与使用
1. ansible-playbook变量定义与使用 命令行 在Inventory中定义 在Playbook中定义 在Role中定义 注册变量(register) 系统信息变量(facts) 2. 在 ...