javascript - Javascript：填写一个网格，每秒一个部分

Question

我什至无法开始使用这个（欢迎指向教程等）

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

| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | etc... 

一秒：

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

两秒：

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

十三秒：

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

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

我很擅长基本的 Javascript——但这让我很困惑。

Answer 1

干得好。我使用 jQuery 作为选择器。您可以使用任何您希望的方法：

CSS：

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

JS：

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

演示：http: //jsfiddle.net/QnYNW/

Answer 2

这是另一个更通用的解决方案：

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

Answer 3

在这里，这应该可以帮助你，用普通的 JS：

演示：http: //jsbin.com/esucig/1/edit

HTML：

<table id="grid" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  ...
</table>

CSS：

#grid, #grid td {
  border: 1px solid black;
}

#grid td {
  width: 20px;
  height: 20px;
}

JS：

var colors = 'pink,cyan,orange,blue,red,lightgreen'.split(','),
    cells = document.querySelectorAll('#grid td');

function colorize(cell) {
  var color = colors.shift();
  cell.style.backgroundColor = color;
  colors.push(color);
}

[].forEach.call(cells, function(cell, i) {
  setTimeout(function(){ colorize(cell) }, 500*i);
});

Answer 4

您可以使用

timer = setInterval(functionThatFillsOnPosition, timeInMiliseconds);

当你完成只是打电话

clearInterval(timer) 

见这里http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 5

像这样的东西：

 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);