-2

これを使い始めることさえできません（チュートリアルへのポインタなどを歓迎します）

私は 10x10 グリッド (たとえば 100px x 100px) を探しています。このグリッドは、1 秒ごとに 1 つのセクションがいっぱいになるまで (100 秒) 埋められます。

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

一秒：

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

2 秒:

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

13 秒:

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

塗りつぶしは無地にするか、シンプルなアイコン (David の星など) にする必要があります。

私は基本的な Javascript を得意としていますが、これは私を困惑させています。

4

5 に答える 5

3

どうぞ。セレクターには 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/

于 2013-03-03T00:32:30.357 に答える
1

ここに別のより一般的な解決策があります：

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);
});
于 2013-03-03T00:55:06.560 に答える
1

ここで、これはプレーンな 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);
});
于 2013-03-03T00:34:34.190 に答える
0

あなたが使用することができます

timer = setInterval(functionThatFillsOnPosition, timeInMiliseconds);

終わったら電話するだけ

clearInterval(timer)

ここを参照してください http://www.w3schools.com/jsref/met_win_setinterval.asp

于 2013-03-03T00:28:21.190 に答える
0

このようなもの：

 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);
于 2013-03-03T00:33:27.910 に答える