JavaScript实现九宫格点击随机变色功能
本文介绍如何使用JavaScript实现九宫格布局中点击任意格子随机改变背景色的效果。通过HTML表格或Div构建网格，利用onclick事件绑定处理函数，结合Math.random生成RGB随机值并修改DOM样式。文中包含表格版与Div版的完整代码示例，并探讨了纯CSS实现点击事件的可行性疑点。
九宫格点击变色功能实现
本文分享了一段使用JavaScript实现九宫格点击后格子颜色变化的具体代码，供读者参考。
目标是完成九宫格的布局，并实现点击任意一个格子后，该格子的背景颜色发生改变的功能。
HTML表格框架与样式设置
首先，利用HTML表格元素构建九宫格的基本框架结构。
<table>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
</table>接着，为九宫格设置相应的CSS样式，包括尺寸、边框和间距等属性。
<style>
table{
height: 600px;
width: 600px;
border-spacing: 0;
}
td{
margin: 0;
border:1px solid red;
}
</style>添加点击事件处理逻辑
为了使每个方块具备点击交互效果，需为每个表格单元格（td）添加onclick事件属性，并在处理函数中通过this关键字引用当前操作的元素对象。
<table>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
</table>CSS点击事件尝试与疑点
在此之前，曾尝试通过CSS直接设置点击事件，例如类似如下写法：
<style>
td{
onclick:change(this);
}
</style>然而，这种方法目前看来不可行，具体原因尚存疑点。
JavaScript核心代码实现
接下来是最核心的JavaScript代码部分。程序使用Math.random()*256生成0到256之间的随机数，再通过parseInt()将其转换为整数，最后通过.style.backgroundColor属性设置背景颜色。
function change(a) {
var randomNum=parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
a.style.backgroundColor="rgb("+randomNum+")";
}完整代码示例
以下是完整的代码实现。
第一种方案基于HTML表格（table）实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
height: 600px;
width: 600px;
border-spacing: 0;
}
td{
margin: 0;
border:1px solid red;
}
</style>
</head>
<body>
<!--使用前端知识，实现九宫格布局，点击任意格子随机改变格子背景颜色-->
<table>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
<tr >
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
<td onclick="change(this)"></td>
</tr>
</table>
<script>
function change(emle) {
console.log("1");
var randomNum=parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
console.log(randomNum);
emle.style.backgroundColor="rgb("+randomNum+")";
}
</script>
</body>
</html>第二种方案基于Div元素实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
margin:0 auto;
width: 306px;
height: 306px;
border: 1px solid red;
}
#box div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
<div onclick="changeColor(this)"></div>
</div>
<script>
function changeColor(elem){
var red = parseInt(Math.random()*256);
var blue = parseInt(Math.random()*256);
var green = parseInt(Math.random()*256);
elem.style.backgroundColor ="rgb("+red+","+blue+","+green+")";
}
</script>
</body>
</html>以上就是本文的全部内容，希望对读者学习有所帮助，也欢迎大家继续支持本站。
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？
2026-11-05 09:37:58