用js写一个可以变色的棋盘
时间: 2024-03-06 09:46:18 浏览: 18
以下是一个用 JavaScript 实现的可以变色的棋盘:
HTML 代码:
```
<div id="chessboard"></div>
```
CSS 代码:
```
#chessboard {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
}
.square {
width: 50px;
height: 50px;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
```
JavaScript 代码:
```
const chessboard = document.getElementById('chessboard');
for (let i = 1; i <= 64; i++) {
const square = document.createElement('div');
square.classList.add('square');
if (i % 2 === 0) {
square.classList.add('black');
} else {
square.classList.add('white');
}
chessboard.appendChild(square);
}
setInterval(() => {
const squares = document.querySelectorAll('.square');
squares.forEach(square => {
square.classList.toggle('black');
square.classList.toggle('white');
});
}, 1000);
```
该代码会生成一个 8x8 的棋盘,并且每秒钟会变换一次黑白格子的颜色。