Question

我正在尝试使用纯JavaScript创建一个棋盘，而不是jQuery。我创建了第一行，但似乎无法“堆叠”行来创建一个完整的板。如果有更好的方法来解决这个问题而不是我要走的路，请赐教。

<!DOCTYPE html>
    <html>

    <head>
        <title>Checkerboard</title>

        <style>
            .box {

                height: 50px;
                width: 50px;
                border: 1px solid black;
                display: inline-block;

            }
        </style>

    </head>

    <body>
        <div class="box"></div>

    </body>
    <script type="text/javascript">

var row = function (node, count) {
    for (var i = 1; i < count; i++) {
        if (i % 2 === 0) {
            copy = node.cloneNode(true);
            node.parentNode.insertBefore(copy, node).style.backgroundColor = "white";
        } else {
            copy = node.cloneNode(true);
            node.parentNode.insertBefore(copy, node).style.backgroundColor = "red";
    } 
}

}

row(document.querySelector('.box'), 8);

    </script>

</html>

Answer 1

您的代码运行正常，您只需要实际运行您已创建的功能：

row(document.getElementsByClassName("box")[0], 50);

JSFiddle：http://jsfiddle.net/63dcjsk4/

修改

如果您正在谈论行之间出现的差距，请使用float并删除内联块显示来解决此问题：

.box { border: 1px solid black; height: 50px; float: left; width: 50px; }

JSFiddle：http://jsfiddle.net/63dcjsk4/1/

如何使用JavaScript

1 个答案: