使用JavaScript创建16x16网格

sqyvllje 于 2022-10-30 发布在 Java

关注(0)|答案(4)|浏览(179)

我正在尝试用JavaScript创建一个16x16的网格。我尝试使用的方法是在HTML中创建一个空的div，然后向其追加其他div，并画出它们的边框。我似乎无法实现这一点，所以我把代码放在下面。
于飞：

<!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;
}

JavaScript

来源：https://stackoverflow.com/questions/57550082/creating-a-16x16-grid-using-javascript

4条答案

按热度按时间

tez616oj1#

使用 CSS variables 和 CSS grid 创建动态行和列会更简洁。
第一个

赞(0）回复(0）举报 2022-10-30

jmp7cifd2#

尝试
第一个

赞(0）回复(0）举报 2022-10-30

dl5txlt93#

Gerardo Furtado提供的解决方案是更改CSS。
旧CSS：

.gridRow {
    border: 1px solid black;
}

.cell {
    border: 1px solid black;
}

已修复CSS：

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 20px;
  display: inline-block;
}

赞(0）回复(0）举报 2022-10-30

fdbelqdn4#

我的解决方案是非常原始的，我想，但它的工作
JS：

const container = document.getElementById('container');

function makeDivs(numDivs) {
for (let d = 0; d < numDivs; d++){
    let cells = document.createElement('div');
    container.appendChild(cells)    
    }
    }

makeDivs(256);

CSS系统


# container {

    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 560px;
    height: 560px;
    border: 3px solid black;
    }

    #container > div {
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    }

赞(0）回复(0）举报 2022-10-30

我来回答

使用JavaScript创建16x16网格

4条答案

相关问题

热门标签

最新问答