首页使用js制作一个国际象棋棋盘

使用js制作一个国际象棋棋盘

时间: 2024-03-15 19:46:59 浏览: 148

好的，以下是一个简单的使用 JavaScript 制作国际象棋棋盘的示例代码： ```html <!DOCTYPE html> <html> <head> <title>国际象棋棋盘</title> <style> /* 设置棋盘格子的样式 */ .square { width: 50px; height: 50px; float: left; } /* 设置黑色格子的背景颜色 */ .square.black { background-color: #b58863; } /* 设置白色格子的背景颜色 */ .square.white { background-color: #f0d9b5; } </style> </head> <body> <div id="chessboard"></div> <script> // 创建一个8x8的棋盘 var chessboard = document.getElementById("chessboard"); for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { var square = document.createElement("div"); chessboard.appendChild(square); // 设置棋盘格子的样式和背景颜色 square.className = "square " + ((i + j) % 2 == 0 ? "white" : "black"); } } </script> </body> </html> ``` 以上代码使用了 HTML、CSS 和 JavaScript，创建了一个简单的国际象棋棋盘。在 HTML 中，我们创建了一个 ID 为 “chessboard” 的 div 元素，用于容纳棋盘格子。在 CSS 中，我们设置了棋盘格子和背景颜色的样式。在 JavaScript 中，我们使用双重循环创建了 64 个棋盘格子，并为每个格子设置了样式和背景颜色。

阅读全文