javascript - 如何在 url 中制作一盒 nxn？

Question

我正在尝试在 HTML 中制作网格。我在 URL 中给出了一个数字，我需要根据这个数字制作一个大小为 n 的网格，然后将其呈现在 HTML 中。

举个例子，假设我的 URL 是这样的 http://localhost/x/3，那么我需要制作一个 3x3 的网格。 URL 可以是任何格式，对此没有限制。为此，我根本不需要使用任何第三方库。

我可以制作一个如图所示的网格 jsfiddle但到目前为止一切都是手动的。

下面是我的 HTML:

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

下面是我的 CSS:

div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

我需要做的是，给定 url 中的数字，我需要在 HTML 中呈现相同大小的网格。

• 如何从 javascript 中的 url 获取数字？
• 然后通过在 HTML 中呈现该数字来生成基于该数字的网格。

任何 jsfiddle 示例都将帮助我更好地理解。

Answer 1

HTML:

<div id="container">
    <!-- cells will be added here -->
</div>

单元格将在创建时分配 class="gridCell"。

CSS:

#container {
    width: 300px;
    height: 300px;
}
#container > .gridCell {
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 1px solid;
}

要根据 base_url/x/num 格式从 url 中读取数字，我们可以使用类似 url.split("x/")[1] 的方法。为了确保它不会出错，我们可以有一个默认号码以防万一。

然后我们需要一个名为 createGrid(n) 的函数，它接受一个数字并创建宽度和高度等于 width of container/n 的单元格并附加它们到容器。

jQuery:

var defaultNum = 6;
var url = window.location.href;
var num = parseInt(url.split("x/")[1]) || defaultNum;
var container = $('#container');
var width = container.outerWidth();
createGrid(num);

function createGrid(n) {
    if(!$.isNumeric(n) || n <= 0)
        return;
    for(var i = 0; i < n*n; i++) {
        var dimension = width/n;
        var cell = $('<div/>').addClass('gridCell').css({
            'width': dimension + 'px',
            'height': dimension + 'px'
        });
        container.append(cell);
    }
}

jsfiddle DEMO