Javascript：填充网格，每秒一节

我甚至在开始这方面都有困难（欢迎指向教程等）

我希望有一个10x10的网格（比如100px x 100px），每秒填充一个部分，直到满（100秒）：

一秒钟：

|X| | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc... 

两秒钟：

|X|X| | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc... 

十三秒：

|X|X|X|X|X|X|X|X|X|X|
|X|X|X| | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc... 

填充应该是实心的，或者是一个简单的图标（比如大卫之星）

我对基本Javascript很在行，但这让我很困惑。

您可以使用

timer = setInterval(functionThatFillsOnPosition, timeInMiliseconds);

等你做完了就打电话

clearInterval(timer) 

---

看这里

给你。我使用jQuery作为选择器。您可以使用您想要的任何方法：

CSS：

.box {
    width         : 9%;
    height        : 20px;
    border-left   : 1px solid #000;
    float         : left;
    margin-bottom : 5px;
    text-align    : center;
}

for (var i = 0; i < 100; i += 1)  {
    $('<div class="box" />').appendTo('body');
    setTimeout(function(i) {
        $('.box:empty:first').html('&#10017;'); // Draw Star of David
    }, (i + 1) * 1000);
}

JS：

.box {
    width         : 9%;
    height        : 20px;
    border-left   : 1px solid #000;
    float         : left;
    margin-bottom : 5px;
    text-align    : center;
}

for (var i = 0; i < 100; i += 1)  {
    $('<div class="box" />').appendTo('body');
    setTimeout(function(i) {
        $('.box:empty:first').html('&#10017;'); // Draw Star of David
    }, (i + 1) * 1000);
}

for（变量i=0；i<100；i+=1）{
$（''）。附于（'正文'）；
设置超时（功能（i）{
$（'.box:empty:first'）.html（'✡；'）；//大卫之星
}（i+1）*1000）；
}

演示：

类似这样的内容：

.box {
    width         : 9%;
    height        : 20px;
    border-left   : 1px solid #000;
    float         : left;
    margin-bottom : 5px;
    text-align    : center;
}

for (var i = 0; i < 100; i += 1)  {
    $('<div class="box" />').appendTo('body');
    setTimeout(function(i) {
        $('.box:empty:first').html('&#10017;'); // Draw Star of David
    }, (i + 1) * 1000);
}

 myInterval = setInterval((function () {
    var count = 0;
    return function () {
        count++;
        var row = Math.floor(count / 10);
        var col = count - (row * 10);

        // fill in with row & column here

        if (count === 100) {
            clearInterval(myInterval);
        }
    }
}()),1000);

---

在这里，这应该可以帮助您，在普通JS中：

演示：

HTML:

JS:

---

这里是另一个更普遍的解决方案：

var gridFiller = function(rows, cols, delay, fn) {
    var currentRow = 0;
    var currentCol = 0;    

    var runner = function() {
      fn(currentRow, currentCol);
      if (!(currentRow === rows-1 && currentCol === cols-1)) {
        currentRow = ++currentRow % rows;
        if (!currentRow) {
          currentCol = ++currentCol % cols;
        }
        setTimeout(runner, delay);
      }
    };
    setTimeout(runner, delay);
};

gridFiller(10, 10, 1000, function(x, y) {
  /* Fill Grid Cell */
  console.log(x + ' / ' + y);
});

---

你的格子是什么做的？你指的是桌子吗？一组div？一张画布？@TimothéeGroleau any/all--虽然被画在一个可以在页面上移动的小格子里，但还是有一些很棒的答案。不知道为什么所有的反对票？（很高兴知道如何改进这个不会引起这么多愤怒的问题…）。在这里链接这个网站不是一个好主意。@Daedalus确实同意你的观点，他们的网站几乎像维基百科，但有时他们做得很好，就像在这个例子中。。。至少我相信，但会避免在以后的页面中引用它们。您链接的页面建议直接调用方法中的函数；这很糟糕，据我所知，这会使它立即执行。解决方法是把它放在方法中的一个anon函数中