javascript - 国际象棋风格图案

Question

我想为i行和j列创建一个像图片中的模式：

此代码不适用于所有情况。

var z = 0
  for(var i = 0;i<s;i++)
    for(var j = 0;j<o;j++,z++)
      color = (z%2==1?"white":"gray");

你可以在这里玩。

Answer 1

试试这个，将 i 和 j 相加，而不是使用第三个变量：

for (var i = 0; i < s; i++)
  for (var j = 0; j < o; j++)
    color = ( (i + j) % 2 == 1 ? "white" : "gray" );

Answer 2

使用这个条件：

color = (i + j) % 2 == 1 ? "white" : "gray";

Answer 3

添加x并y获得模数。

// ...

var table$ = $('<table>');
for(var y = 0; y < s ; y++) {
  var tr$ = $('<tr>');
  for(var x = 0; x < o; x++) {
    var td$ = $('<td>').css({
      width: p_w,
      height: p_h,
      'background-color': getColor(x, y)
    });
    tr$.append(td$);
  }
  table$.append(tr$);
}

// ...
var Color = {
  GRAY: '#aaa',
  WHITE: '#fff'
};

function getColor(x, y) {
  return (x + y) % 2 === 0 ? Color.WHITE: Color.GRAY;
}

演示