JavaScript實現九宮格點擊變色效果
本文實例為大傢分享瞭JavaScript實現九宮格點擊變色效果的具體代碼,供大傢參考,具體內容如下
完成九宮格佈局,實現點擊任意格子之後改變該格子自身背景顏色。
首先使用表格完成九宮格框架:
<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>
再次之前嘗試過通過CSS全部設置點擊事件,像這樣:
<style> td{ onclick:change(this); } </style>
但是不能用,目前還是疑點。
最後是最重要的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版:
<!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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。