JavaScript实现九宫格点击变色效果

本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码，供大家参考，具体内容如下

完成九宫格布局，实现点击任意格子之后改变该格子自身背景颜色。

首先使用表格完成九宫格框架：

设置九宫格样式：

最后为了达到每一个方块都有点击的效果，给每一个td添加onclick属性，通过this引用对象本身：

再次之前尝试过通过CSS全部设置点击事件，像这样：

但是不能用，目前还是疑点。

最后是最重要的JS代码部分，使用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+")";
     }

完整代码如下：

table版：

Div版：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。