JavaScript實現九宮格點選變色效果
阿新 • • 發佈:2021-08-17
本文例項為大家分享了實現九宮格點選變色效果的具體程式碼,供大家參考,具體內容如下
完成九宮格佈局www.cppcns.com,實現點選任意格子之後改變該格子自身背景顏色。
首先使用表格完成九宮格框架:
<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>
設定九宮格樣式:
<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>
再次之前嘗試過通過全部設定點選事件,像這樣:
<style> td{ onclick:change(this); } </style>
但是不能用,目前還是疑點。
最後是最重要的程式碼部分,使用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版:
<!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); console.log(randomNum); emle.style.backgroundColor="rgb("+randomNum+")"; } </script> </body> <CpVnLrz;/html>
Div版:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title&gwww.cppcns.comt; <style> #box{ margin:0 auto; http://www.cppcns.com 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)"www.cppcns.com></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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。