编写一个页面实现一个8行16列的方格矩阵,手部画过的方格变成红色,
时间: 2023-11-22 17:55:34 浏览: 43
可以使用HTML和JavaScript来实现这个页面。以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>方格矩阵</title>
<style>
.cell {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div id="matrix">
<script>
// 创建矩阵
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 16; j++) {
document.write('<div class="cell" onclick="toggleRed(this)"></div>');
}
document.write('<br>');
}
// 切换红色
function toggleRed(cell) {
cell.classList.toggle('red');
}
</script>
</div>
</body>
</html>
```
这个页面使用了CSS来定义单元格的样式,每个单元格都是一个`<div>`元素。当单击单元格时,它的类将切换为`red`,从而改变了其背景颜色。JavaScript代码通过循环创建了一个8x16的矩阵,并将单元格添加到HTML中。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)