Question

我有一些代码用红色图块填充了浏览器窗口。
该脚本正在寻找对角线，应该稍微延迟一下依次改变每个对角线的颜色。也就是说，首先左上方的图块变成不同的颜色，然后对角线继续等等。

body {
  background-color: #333;
  overflow: hidden;
}

.tile {
  background-color: #993333;
  border: 1px solid #661111;
  border-width: 1px 1px 0 0;
  box-sizing: border-box;
  height: 5vh;
  width: 5vw;
  float: left;
}

var totalRows = 20;
var totalCols = 20;
var delay = 0.5; // задержка

var tiles = createTiles(totalRows, totalCols);
var diagonals = getDiagonals(tiles, totalRows, totalCols);


function getDiagonals(array, rows, cols) {
    var diagonals = [];
    for (var i = 0; i < rows + cols - 1; i++) {
        var row = 0;
        var col = i;
        var diagonal = [];
        while (col >= 0 && row < rows) {
            if (col < cols) {
                diagonal.push(array[row * cols + col]);
            }
            row++;
            col--;
        }
        diagonals.push(diagonal);
    }
    return diagonals;
}

function createTiles (rows, cols) {
    var tilesHtml = '';
    for (var i = 0; i < rows * cols; i++) {
        tilesHtml += '<div class="tile"></div>';
    }
    var tiles = document.getElementById('tiles');
    tiles.innerHTML = tilesHtml;
    return tiles.querySelectorAll('.tile');
}

<div id="tiles"> </div>

我不知道如何进行延迟，我试图通过一个周期来实现它，但是却没有任何效果，因为它们无需动画即可立即改变颜色。

for (var i = 0; i < diagonals.length; i++) {
  for (var j = 0; j < diagonals[i].length; j++) {
    var tile = diagonals[i][j];

    tile.style.backgroundColor = "green";
  }
}

我知道可以使用setTimeout来实现，但是我不知道如何对二维数组执行此操作。

代码的操作必须与此类似。
1111 | 0111 | 0011 | 0001 | 0000 | 0000 | 0000 | 0000
1111 | 1111 | 0111 | 0011 ｜| 0001 | 0000 | 0000 | 0000
1111 | 1111 | 1111 | 0111 ｜| 0011 ｜| 0001 | 0000 | 0000
1111 | 1111 | 1111 | 1111 || 0111 | 0011 | 0001 | 0000
该代码的工作方式应是，在通过的一个周期中，一个对角线完全着色（不是在一块板上，而是在对角线上的所有图块上）。

Answer 1

Something like this？

要实现定时循环概念，您必须使用递归。以下代码段对此进行了说明：

// Consider it as timed for(var i = 0; i < diagonals.length; i++) loop
function recursiveLoop1(i) {
  var j = 0; // initializtion

  if(i < diagonals.length) setTimeout(() => {
    recursiveLoop2(j, diagonals[i][j]); // called secondary for loop
    i++; // increment

    return recursiveLoop1(i); // called primary for loop after 100 ms
  }, 100);

  else return ; // exit condition
}

// Consider it as timed for(var j = 0; j < diagonals[i].length; j++) loop
function recursiveLoop2(j, el) {
  if(j < diagonals[i].length) setTimeout(() => {
    el.style.backgroundColor = 'green';
    j++; // increment

    return recursiveLoop2(j, el); // called secondary for loop after 100 ms
  }, 100);

  else return ; // exit condition
}

var i = 0; // initialization
recursiveLoop1(i);

JavaScript动画（图块）

1 个答案: