如何使用 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.