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 ...
随机推荐
- JDK15真的来了,一起来看看它的新特性
目录 简介 JDK15的新特性 JEP 385 Deprecate RMI Activation for Removal JEP 371 Hidden Classes JEP 339 Edwards- ...
- 学习 | iscroll之上拉加载下拉刷新
引入文件顺序 1.zepto 2.iscroll.js 3.scroll-probe.js 链接 完整代码:https://github.com/dirkhe1051931999/writeBlog/ ...
- vue-ajax/axios请求函数封装: axios+promise
项目文件目录/src/api ajax.js /** * ajax 请求函数模块 * 返回值为promise对象 */ import axios from 'axios' export default ...
- php Zookeeper使用踩坑
用的是Zookeeper扩展,Php版本为7.2.17,下载地址: https://pecl.php.net/package/zookeeper 用的是0.6.4版本 创建节点官方给的示例如下: &l ...
- hystrix总结之限流
hystrix使用舱壁隔离模式来隔离和限制各个请求,设计了两种隔离方式:信号量和线程池.线程池隔离:对每个command创建一个自己的线程池,执行调用.通过线程池隔离来保证不同调用不会相互干扰和每一个 ...
- 《Java从入门到失业》第四章:类和对象(4.4):方法参数及传递
4.4方法参数及传递 关于这个知识点,我想了很久该不该在这里阐述.因为这个知识点稍微有点晦涩,并且就算不了解也不影响用Java编写代码.不过笔者刚开始工作的时候,就是因为这块内容没有过多的关注,以至于 ...
- Oracle学习(五)DBLINK
一.DBLINK学习 目的:为了解决跨库访问的需求. 场景如下:tnsnames.ora(oracle的库配置文件)下配置了2个库的环境地址,现在要实现跨库访问. PS:DBLINK和是否同一个主机无 ...
- Bottleneck靶机渗透
Bottleneck 端口扫描,主机发现. 敏感目录为:http://192.168.114.165/image_gallery.php 在该目录下发现:http://192.168.114.165/ ...
- 【Processing-日常4】等待动画2
之前在CSDN上发表过: https://blog.csdn.net/fddxsyf123/article/details/79781034
- iOS14剪切板探究,淘宝实现方法分析
随着iOS 14的发布,剪切板的滥用也被大家所知晓.只要是APP读取剪切板内容,系统都会在顶部弹出提醒,而且这个提醒不能够关闭.这样,大家在使用APP的过程中就能够看到哪些APP使用了剪切板. 正好我 ...