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

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. JDK15真的来了,一起来看看它的新特性

    目录 简介 JDK15的新特性 JEP 385 Deprecate RMI Activation for Removal JEP 371 Hidden Classes JEP 339 Edwards- ...

  2. 学习 | iscroll之上拉加载下拉刷新

    引入文件顺序 1.zepto 2.iscroll.js 3.scroll-probe.js 链接 完整代码:https://github.com/dirkhe1051931999/writeBlog/ ...

  3. vue-ajax/axios请求函数封装: axios+promise

    项目文件目录/src/api ajax.js /** * ajax 请求函数模块 * 返回值为promise对象 */ import axios from 'axios' export default ...

  4. php Zookeeper使用踩坑

    用的是Zookeeper扩展,Php版本为7.2.17,下载地址: https://pecl.php.net/package/zookeeper 用的是0.6.4版本 创建节点官方给的示例如下: &l ...

  5. hystrix总结之限流

    hystrix使用舱壁隔离模式来隔离和限制各个请求,设计了两种隔离方式:信号量和线程池.线程池隔离:对每个command创建一个自己的线程池,执行调用.通过线程池隔离来保证不同调用不会相互干扰和每一个 ...

  6. 《Java从入门到失业》第四章:类和对象(4.4):方法参数及传递

    4.4方法参数及传递 关于这个知识点,我想了很久该不该在这里阐述.因为这个知识点稍微有点晦涩,并且就算不了解也不影响用Java编写代码.不过笔者刚开始工作的时候,就是因为这块内容没有过多的关注,以至于 ...

  7. Oracle学习(五)DBLINK

    一.DBLINK学习 目的:为了解决跨库访问的需求. 场景如下:tnsnames.ora(oracle的库配置文件)下配置了2个库的环境地址,现在要实现跨库访问. PS:DBLINK和是否同一个主机无 ...

  8. Bottleneck靶机渗透

    Bottleneck 端口扫描,主机发现. 敏感目录为:http://192.168.114.165/image_gallery.php 在该目录下发现:http://192.168.114.165/ ...

  9. 【Processing-日常4】等待动画2

    之前在CSDN上发表过: https://blog.csdn.net/fddxsyf123/article/details/79781034

  10. iOS14剪切板探究,淘宝实现方法分析

    随着iOS 14的发布,剪切板的滥用也被大家所知晓.只要是APP读取剪切板内容,系统都会在顶部弹出提醒,而且这个提醒不能够关闭.这样,大家在使用APP的过程中就能够看到哪些APP使用了剪切板. 正好我 ...