需求:點擊頁面的按鈕,改變頁面的顏色
思路:一先畫出最簡單的頁面,二想辦法獲取頁面的body節點,三想辦法修改body節點的背景顏色屬性,四通過一個方法獲取隨機的顏色值
和第一個例子(JS-改變頁面的顏色(一))相比僅僅是改變了生成顏色值的思路
簡單的代碼片段如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Change Page Color Script</title> <script> /* 改變頁面的背景顏色 */ function changePageColor() { //拿到body元素 var bodyArray=document.getElementsByTagName("body"); var body=bodyArray[0]; //修改body元素的背景顏色屬性 body.setAttribute("bgcolor",getColorValue(6)); }/* 獲取背景顏色的十六進制表示值,這個方法也是前段簡單的驗證碼的編寫思路 */ function getColorValue(len) { var colorValue = "#"; var charArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A', 'B', 'C', 'D', 'E', 'F'); for (var i = 0; i < len; i++) { var charIndex = Math.floor(Math.random() * 16); colorValue += charArray[charIndex]; } return colorValue; } </script> </head> <body bgcolor="green" align="center"> <input type="button" value="ChangePageColor" onclick="changePageColor();"/> </body> </html>
