如何制作棋盘格图案？现有实现出现黑白条纹问题求助

问题出在你只用单个格子的index奇偶性判断颜色——按顺序创建格子时，一行结束后下一行第一个格子的index必然和上一行最后一个index奇偶相反，导致每行颜色整体错位，形成条纹；index%8也不对，它只会让每8个格子重复颜色，无法实现棋盘格的交错效果。

正确逻辑 #

棋盘格的核心是每个格子的行号与列号之和的奇偶性：

• 行号 + 列号 为偶数 → 一种颜色
• 行号 + 列号 为奇数 → 另一种颜色

代码示例（8x8棋盘） #

HTML

<div id="checkerboard"></div>

CSS

#checkerboard {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
}
.square {
  width: 50px;
  height: 50px;
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}

JavaScript（双层循环写法，更直观）

const checkerboard = document.getElementById('checkerboard');
const boardSize = 8;

for (let row = 0; row < boardSize; row++) {
  for (let col = 0; col < boardSize; col++) {
    const square = document.createElement('div');
    square.classList.add('square');
    // 关键判断：行+列的奇偶性
    square.classList.add((row + col) % 2 === 0 ? 'white' : 'black');
    checkerboard.appendChild(square);
  }
}

如果你用单层循环创建格子

const checkerboard = document.getElementById('checkerboard');
const boardSize = 8;

for (let index = 0; index < boardSize * boardSize; index++) {
  const square = document.createElement('div');
  square.classList.add('square');
  // 通过index计算行号和列号
  const row = Math.floor(index / boardSize);
  const col = index % boardSize;
  square.classList.add((row + col) % 2 === 0 ? 'white' : 'black');
  checkerboard.appendChild(square);
}

这样就能生成正确的黑白交错棋盘格，不会出现条纹问题。

内容的提问来源于stack exchange，提问作者ACTS 238