Question

所以，我有一小段代码可以生成行和列的框，其间有空格。

似乎工作正常;但是，当我将盒子的高度和宽度设置为32像素，并将它们之间的空间设置为8像素时，有一些空白开始出现在盒子的位置。

如果我使用他们工作的任何其他数字，但当然我的想法设置为32和8。

我想知道这是否是我通过创建框进行循环的方法，或者是否有一些我不明白的基础数学。

这是一个使用相关代码设置的jsFiddle：

http://jsfiddle.net/dondon/zMnuK/

如果将JS部分中的'spacing'修改为7或9，则间隙消失。什么是导致间隙出现的8（或4）？

任何输入都表示赞赏！：）

Answer 1

它与具有相同id的多个盒子有关，并且在它们两者上设置了css，使得它们最终处于完全相同的位置。例如，创建的第三个框具有x位置（x与循环顺序垂直）88px，y位置8px。然后在第三行中稍后一个y = 88px，x = 8px的框。到达时，'box' + x + y;对于这两个框都是相同的。你不能拥有多个具有相同id的元素，所以任何事情都可能发生在那之后。

简单的解决方案是改变：

var boxid = "box"+x+y;

要：

var boxid = "box"+x+'_'+y;

Updated JSFiddle

Answer 2

当您指定了boxid值时，看起来存在锯齿，而这种情况只发生在等于8的间距。

原来你有：

var boxid = "box"+x+y;

所以你可以有两个具有相同id的盒子

将其更改为：

var boxid = "box"+x+"_"+y;

JavaScript Math / Looping动态创建行和列

2 个答案: