利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色
Posted who am i ?
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div+css+js实现九宫格点击随机变色</title> <script> var inner = document.getElementsByClassName("inner"); function ChangeColor(num){ var a = parseInt(Math.random()*10); var b = parseInt(Math.random()*10); var c = parseInt(Math.random()*10); var d = parseInt(Math.random()*10); var e = parseInt(Math.random()*10); var f = parseInt(Math.random()*10); var g = "#"+a+b+c+d+e+f; inner[num].style.backgroundColor=g; // log.innerHTML=g; // inner[num].style.backgroundColor="rgb("+parseInt(Math.random()*255)+","+parseInt // (Math.random()*255)+","+parseInt(Math.random()*255)+")"; } </script> <style> #outer{ width:306px; } #outer div{ height:100px; width:100px; background-color: #ff00ff; float: left; line-height:100px; text-align: center; margin-left:2px; margin-top:2px; } </style> </head> <body> <div id="outer"> <div class="inner" onclick="ChangeColor(‘0‘)">1</div> <div class="inner" onclick="ChangeColor(‘1‘)">2</div> <div class="inner" onclick="ChangeColor(‘2‘)">3</div> <div class="inner" onclick="ChangeColor(‘3‘)">4</div> <div class="inner" onclick="ChangeColor(‘4‘)">5</div> <div class="inner" onclick="ChangeColor(‘5‘)">6</div> <div class="inner" onclick="ChangeColor(‘6‘)">7</div> <div class="inner" onclick="ChangeColor(‘7‘)">8</div> <div class="inner" onclick="ChangeColor(‘8‘)">9</div> </div> <div id="log"></div> </body> </html>
以上是关于利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章