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

在这里，这应该可以帮助你，简单的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 3

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

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

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

5 个答案: