如何使用JS实现棋盘格子颜色互换

用JS实现一个效果
点击 “变色” 按钮后，棋盘内相邻的格子颜色互换，红色变成黑色，黑色变成红色

img


但是我设置的代码点击 '变色' 按钮后，却变成了这种隔行变色的效果

img

img

img


我是用createElement属性创造了400个div格子元素放到oBox框子元素中的
本人初学JS，实在想不明白。请问您们知道该怎么做这种效果吗？

修改后：

  • 你的代码中，点击按钮后会根据index的值来判断当前要变成哪种颜色的棋盘。如果index是偶数，就将偶数索引位置的格子变成红色，奇数索引位置的格子变成黑色；如果index是奇数，就将偶数索引位置的格子变成黑色，奇数索引位置的格子变成红色。

  • 修改后的代码段中，点击按钮后会遍历所有的格子，如果格子的背景颜色是红色，则将其变成黑色，反之如果是黑色，则将其变成红色。该代码段没有使用index来控制具体变换的颜色，而是根据格子原本的颜色来进行切换。

img

img

<!DOCTYPE html>
<html>
<head>
  <title>棋盘变色</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
  
    #box {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -200px;
      border: 1px solid black;
    }
  
    #box > div {
      width: 20px;
      height: 20px;
      float: left;
    }
  
    #Btn {
      width: 80px;
      height: 30px;
      font-size: 15px;
      letter-spacing: 1px;
      position: absolute;
      top: 40%;
      left: 30%;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <input type="button" name="colorBtn" id="Btn" value="变色">
  
  <script type="text/javascript">
    var oBox = document.getElementById('box');
    var index = 0;
    
    for (var i = 0; i < 400; i++) {
      var oDiv = document.createElement('div');
      oBox.appendChild(oDiv);
      
      if (Math.floor(i / 20) % 2 == 0) {
        if (i % 2 == 0) {
          oDiv.style.background = 'red';
        } else {
          oDiv.style.background = 'black';
        }
      } else {
        if (i % 2 == 0) {
          oDiv.style.background = 'black';
        } else {
          oDiv.style.background = 'red';
        }
      }
    }
    
    var colorBtn = document.getElementById("Btn");
    colorBtn.onclick = function() {
      index++;
      var allDiv = oBox.getElementsByTagName('div');
      
      for (var a = 0; a < allDiv.length; a++) {
        if (allDiv[a].style.background == 'red') {
          allDiv[a].style.background = 'black';
        } else {
          allDiv[a].style.background = 'red';
        }
      }
    };
  </script>
</body>
</html>

【以下回答由 GPT 生成】

解决方案

要实现棋盘格子颜色互换的效果，可以根据点击事件来改变相邻格子的颜色。

以下是一个可能的解决方案：

  1. 添加一个点击事件监听器，当点击 "变色" 按钮时触发。
  2. 在点击事件处理程序中，获取所有棋盘格子的列表。
  3. 遍历格子列表，对每个格子执行以下操作：
  4. 检查格子的当前颜色。如果为红色，则将其颜色设为黑色；如果为黑色，则将其颜色设为红色。
  5. 更新格子的样式，使其显示出新的颜色。
  6. 完成格子的颜色互换。

以下是一个示例代码来实现该效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      width: 400px; /* 棋盘宽度 */
    }

    .box div {
      width: 20px; /* 格子宽度 */
      height: 20px; /* 格子高度 */
    }

    .red {
      background-color: red; /* 红色 */
    }

    .black {
      background-color: black; /* 黑色 */
    }
  </style>
</head>
<body>
  <div id="oBox" class="box"></div>
  <button id="changeColorBtn">变色</button>

  <script>
    // 创建格子元素
    function createGridElements() {
      var oBox = document.getElementById('oBox');

      for (var i = 0; i < 400; i++) {
        var oGrid = document.createElement('div');
        oGrid.classList.add('black');
        oBox.appendChild(oGrid);
      }
    }

    // 更新格子颜色
    function updateGridColor() {
      var oBox = document.getElementById('oBox');
      var oGrids = oBox.getElementsByTagName('div');

      for (var i = 0; i < oGrids.length; i++) {
        var oGrid = oGrids[i];
        var bgColor = oGrid.classList.contains('red') ? 'black' : 'red';

        oGrid.className = bgColor;
      }
    }

    // 点击事件处理程序
    function handleClickEvent() {
      updateGridColor();
    }

    // 添加点击事件监听器
    var changeColorBtn = document.getElementById('changeColorBtn');
    changeColorBtn.addEventListener('click', handleClickEvent);

    // 初始化棋盘
    createGridElements();
  </script>
</body>
</html>

以上代码将创建一个棋盘，其中的格子都为黑色。当点击 "变色" 按钮时，格子的颜色会互相变换（红色变黑色，黑色变红色）。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

结合GPT给出回答如下请题主参考
首先需要对棋盘格子进行编号，可以使用一个二维数组存储每个格子的颜色和编号。然后定义一个函数来交换相邻格子的颜色，并使用addEventListener()函数将该函数绑定在“变色”按钮上，实现点击按钮后颜色互换的效果。

以下是一个示例代码：

HTML代码：

<div id="chessboard"></div>
<button id="btn">变色</button>

CSS代码：

#chessboard {
  width: 200px;
  height: 200px;
}

.cell {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

JavaScript代码：

var board = document.getElementById("chessboard");
var chessboard = [];
var rowNum = 10;
var colNum = 10;

// 初始化棋盘格子
for (var i = 0; i < rowNum; i++) {
  chessboard[i] = [];
  for (var j = 0; j < colNum; j++) {
    var cell = document.createElement("div");
    cell.className = "cell";
    if ((i + j) % 2 === 0) {
      cell.classList.add("red");
      chessboard[i][j] = {
        color: "red",
        id: i * colNum + j,
      };
    } else {
      cell.classList.add("black");
      chessboard[i][j] = {
        color: "black",
        id: i * colNum + j,
      };
    }
    board.appendChild(cell);
  }
}

var btn = document.getElementById("btn");
btn.addEventListener("click", changeColor);

// 交换相邻格子的颜色
function changeColor() {
  for (var i = 0; i < rowNum; i++) {
    for (var j = 0; j < colNum; j++) {
      if (j < colNum - 1) {
        var temp = chessboard[i][j].color;
        chessboard[i][j].color = chessboard[i][j + 1].color;
        chessboard[i][j + 1].color = temp;
        var cell1 = document.getElementById(chessboard[i][j].id);
        var cell2 = document.getElementById(chessboard[i][j + 1].id);
        cell1.classList.replace(temp, chessboard[i][j].color);
        cell2.classList.replace(chessboard[i][j + 1].color, temp);
      }
    }
  }
}

此代码会生成一个棋盘，初始情况下相邻格子颜色不同。点击“变色”按钮后，相邻格子的颜色会交换。


<!DOCTYPE html>
<html>
<head>
  <title>棋盘变色</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    #box {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -200px;
      border: 1px solid black;
    }
    #box > div {
      width: 20px;
      height: 20px;
      float: left;
    }
    #Btn {
      width: 80px;
      height: 30px;
      font-size: 15px;
      letter-spacing: 1px;
      position: absolute;
      top: 40%;
      left: 30%;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <input type="button" name="colorBtn" id="Btn" value="变色">
  <script type="text/javascript">
    var oBox = document.getElementById('box');
    var index = 0;
    for (var i = 0; i < 400; i++) {
      var oDiv = document.createElement('div');
      oBox.appendChild(oDiv);
      if (Math.floor(i / 20) % 2 == 0) {
        if (i % 2 == 0) {
          oDiv.style.background = 'red';
        } else {
          oDiv.style.background = 'black';
        }
      } else {
        if (i % 2 == 0) {
          oDiv.style.background = 'black';
        } else {
          oDiv.style.background = 'red';
        }
      }
    }
    var colorBtn = document.getElementById("Btn");
    colorBtn.onclick = function() {
      index++;
      var allDiv = oBox.getElementsByTagName('div');
      for (var a = 0; a < allDiv.length; a++) {
        if (allDiv[a].style.background == 'red') {
          allDiv[a].style.background = 'black';
        } else {
          allDiv[a].style.background = 'red';
        }
      }
    };
  </script>
</body>
</html>

引用 皆我百晓生 小程序回复内容作答：
可以使用事件委托的方式来处理点击事件，即给棋盘容器添加一个点击事件监听器，当点击的目标元素是棋盘格子时，执行颜色互换的操作。

首先，可以给每个格子设置一个data属性，来标记格子的颜色状态。例如，红色的格子可以设置data-color属性为"red"，黑色的格子可以设置data-color属性为"black"。

在点击事件监听器中，首先判断点击的目标元素是不是格子元素，可以通过目标元素的tagName来判断。然后，根据目标元素的data-color属性的值，来执行红色和黑色的互换操作。

下面是一个示例的代码：

HTML：

<div id="chessboard"></div>
<button id="change-color">变色</button>

CSS：

#chessboard {
  width: 400px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 20%;
  height: 20%;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

JavaScript：

var chessboard = document.getElementById('chessboard');
var changeColorButton = document.getElementById('change-color');
var cells = [];

// 创建格子元素
for (var i = 0; i < 400; i++) {
  var cell = document.createElement('div');
  cell.classList.add('cell');
  cell.dataset.color = 'red'; // 初始化为红色
  cells.push(cell);
  chessboard.appendChild(cell);
}

// 点击事件监听器
chessboard.addEventListener('click', function(event) {
  var target = event.target;
  
  // 判断点击的目标元素是格子元素
  if (target.tagName === 'DIV' && target.classList.contains('cell')) {
    // 切换红色和黑色
    if (target.dataset.color === 'red') {
      target.dataset.color = 'black';
      target.style.backgroundColor = 'black';
    } else {
      target.dataset.color = 'red';
      target.style.backgroundColor = 'red';
    }
  }
});

// 点击按钮执行颜色互换
changeColorButton.addEventListener('click', function() {
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    
    // 切换红色和黑色
    if (cell.dataset.color === 'red') {
      cell.dataset.color = 'black';
      cell.style.backgroundColor = 'black';
    } else {
      cell.dataset.color = 'red';
      cell.style.backgroundColor = 'red';
    }
  }
});

这样点击按钮或者点击棋盘格子，都可以实现颜色互换的效果。

提供参考实例，链接：https://blog.51cto.com/harmonyos/5615543

如果是偶数个列：遍历每一行，将每一行中的相邻单元格交换颜色。
如果是奇数个列：也是遍历每一行，但是是奇数列，所以最后一列一定不会交换，最后一列可以这样处理，当所有行处理完毕之后，针对最后一列所有单元格，进行列方向的颜色交换。

用行列的奇偶性就可以判断就可以实现变色