使用JavaScript创建一个16x16的网格。

20 浏览
0 Comments

使用JavaScript创建一个16x16的网格。

我正在尝试在JavaScript中创建一个16x16的网格。我尝试的方法是在HTML中创建一个空的div，然后将其他div添加到其中，并描绘它们的边框。我似乎无法使其正常工作，下面是我的代码。

HTML:



    Etch-a-Sketch

JavaScript:

// 设置重要的常量和变量
const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// 创建一个默认大小为16x16的网格
function defaultGrid() {
    makeRows(16);
    makeColumns(16);
}
// 根据输入的行数创建行
function makeRows(rowNum) {
    for (r = 0; r < rowNum; r++) {
        let row = document.createElement("div");
        container.appendChild(row).className = "gridRow";
    };
};
// 创建列
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;
}

0