需求：點擊頁面的按鈕，改變頁面的顏色
思路：一先畫出最簡單的頁面，二想辦法獲取頁面的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()); } /* 獲取背景顏色的十六進制表示值，這個方法也是前段簡單的驗證碼的編寫思路 */ function getColorValue() { //這里不再是隨機的顏色了，可以根據自己的喜好選擇幾種顏色，作為備選的頁面改變顏色 var charArray = new Array('AliceBlue', 'Chartreuse', 'DarkGreen', 'GreenYellow', 'LimeGreen', 'PaleGreen', 'SpringGreen', 'Red', 'Orange ', 'MediumSpringGreen ','Indigo', 'DarkMagenta', 'Blue', 'DarkGray', 'Fuchsia', 'Lime'); var charIndex = Math.floor(Math.random() * 16); return charArray[charIndex]; } </script> </head> <body bgcolor="green" align="center"> <input type="button" value="ChangePageColor" onclick="changePageColor();"/> </body> </html>