如何使用 JavaScript 和 DOM 创建棋盘图案？

只需一点 JavaScript 和 DOM 操作，你就可以在网页上创建各种有趣的图案。在本教程中，我们将向您展示如何使用 JavaScript 和 DOM 创建棋盘图案。

方法

  • 步骤 1 − 我们首先创建一个 <div> 元素，其 id 为“chessboard”。这将是包含棋盘图案的元素。

  • 步骤 2 − 我们创建一个 <style> 元素，将 #chessboard div 的宽度和高度设置为 400px。我们还创建了一个名为 .chess-square 的类，将元素的宽度和高度设置为 50px，并向左浮动。

  • 步骤 3 − 我们创建了一个嵌套的 for 循环，循环遍历 8 行和 8 列。

  • 步骤 4 − 对于 for 循环的每次迭代，我们创建一个 <div> 元素，其类为“chess-square”。

  • 步骤 5 − 如果当前行和列的总和为偶数，我们将棋盘方格的背景颜色设置为黑色。否则，背景颜色设置为白色。

  • 步骤 6 − 我们将棋盘方格 <div> 元素附加到 #chessboard div。

  • 步骤 7 − 我们关闭 for 循环。

  • 步骤 8 − 我们关闭 <script> 标签。

  • 步骤 9 − 我们关闭 #chessboard div。

  • 步骤 10 − 我们关闭 <body> 标签。

  • 步骤 11 − 我们关闭 <html> 标签

示例

无单元格边框的棋盘图案

在下面的程序中，我们使用 JavaScript 和 DOM 创建了一个棋盘图案。图案中的单元格没有边框。

<!DOCTYPE HTML>
<html>
<head>
<style>
#chessboard {
   width: 400px;
   height: 400px;
}
.chess-square {
   float: left;
   width: 50px;
   height: 50px;
   background-color: #fff;
}
</style>
</head>
<body>

<div id="chessboard">
</div>
<script>
   var chessboard = document.getElementById('chessboard');
   for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
         var chessSquare = document.createElement('div');
         chessSquare.className = 'chess-square';
         if ((i + j) % 2 == 0) {
            chessSquare.style.backgroundColor = '#000';
         }
         chessboard.appendChild(chessSquare);
      }
   }
</script>
</body>
</html>

示例

带单元格边框的棋盘图案

在下面的示例中，我们使用 JavaScript 和 DOM 创建了一个带单元格边框的棋盘图案。为了创建边框，我们使用了 1px 实线黑色边框。

<!DOCTYPE HTML>
<html>
<head>
<style>
#chessboard {
   width: 400px;
   height: 400px;
}
.chess-square {
   float: left;
   width: 48px;
   border: 1px solid black;
   height: 48px;
   background-color: #fff;
}
</style>
</head>
<body>
<div id="chessboard"></div>
<script>
   var chessboard = document.getElementById('chessboard');
   for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
         var chessSquare = document.createElement('div');
         chessSquare.className = 'chess-square';
         if ((i + j) % 2 == 0) {
            chessSquare.style.backgroundColor = '#000';
         }
         chessboard.appendChild(chessSquare);
      }
   }
</script>
</body>
</html>

这就是使用 JavaScript 和 DOM 创建棋盘图案的全部内容！如您所见，一旦您理解 for 循环的工作原理，它就不难。尝试不同的图案，看看你能想出什么！

更新于: 2022年8月3日

5K+ 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.