使用JavaScript创建16x16网格 [英] Creating a 16x16 grid using JavaScript
本文介绍了使用JavaScript创建16x16网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试用JavaScript创建一个16x16的网格.我尝试使用的方法是在HTML中创建一个空的
div ，然后将其他div附加到其上，并勾勒出它们的边框.我似乎无法完成这项工作，并且将我的代码放在下面.
HTML:
<！DOCTYPE html>< head>< title>蚀刻蚀刻</title>< link rel ="stylesheet" type ="text/css" href ="style.css">< script type ="text/javascript" src ="app.js"></script></head><身体>< div id ="container"></div></body> JavaScript:
//设置重要的常量和变量const container = document.getElementById("container");让行= document.getElementsByClassName("gridRow");让单元格= document.getElementsByClassName("cell");//创建大小为16x16的默认网格函数defaultGrid(){makeRows(16);makeColumns(16);}//接受(行，列)输入并生成网格函数makeRows(rowNum){//创建行对于(r = 0; r< rowNum; r ++){让row = document.createElement("div");container.appendChild(row).className ="gridRow";};};//创建列函数makeColumns(cellNum){对于(i = 0; i< rows.length; i ++){对于(j = 0; j< cellNum; j ++){让newCell = document.createElement("div");rows [j] .appendChild(newCell).className =单元格";};};}; CSS:
.gridRow {边框:1px纯黑色；}.细胞 {边框:1px纯黑色；} 解决方案
使用 CSS网格 创建动态行和列.
const container = document.getElementById("container");函数makeRows(rows，cols){container.style.setProperty('-grid-rows'，行);container.style.setProperty('-grid-cols'，cols);for(c = 0; c<(rows * cols); c ++){让单元格= document.createElement("div");cell.innerText =(c +1);container.appendChild(cell).className =网格项";};};makeRows(16，16); :root {--grid-cols:1；--grid-rows:1；}#容器 {显示:网格；网格间隙:1em;网格模板行:repeat(var(-grid-rows)，1fr);网格模板列:repeat(var(-grid-cols)，1fr);}.grid-item {填充:1em；边框:1px实线#ddd;文本对齐:居中；} < div id ="container"></div> I'm trying to create a 16x16 grid in JavaScript. The method I'm trying to use is to create an empty div in HTML, and then append other divs to it, and outline their borders. I can't seem to make this work, and I've put my code below.
HTML:
<!DOCTYPE html>
<head>
<title>Etch-a-Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
JavaScript:
// Sets important constants and variables
const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// Creates a default grid sized 16x16
function defaultGrid() {
makeRows(16);
makeColumns(16);
}
// Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {
// Creates rows
for (r = 0; r < rowNum; r++) {
let row = document.createElement("div");
container.appendChild(row).className = "gridRow";
};
};
// Creates columns
function makeColumns(cellNum) {
for (i = 0; i < rows.length; i++) {
for (j = 0; j < cellNum; j++) {
let newCell = document.createElement("div");
rows[j].appendChild(newCell).className = "cell";
};
};
};
CSS:
.gridRow {
border: 1px solid black;
}
.cell {
border: 1px solid black;
}
解决方案
It would be much cleaner to use CSS variables and CSS grid to create dynamic rows and columns.
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #ddd;
text-align: center;
}
<div id="container">
</div>
这篇关于使用JavaScript创建16x16网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
