需求：点击页面的按钮，改变页面的颜色
思路：一先画出最简单的页面，二想办法获取页面的body节点，三想办法修改body节点的背景颜色属性，四通过一个方法获取随机的颜色值
简单的代码片段如下所示：
<!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() { return "#"+Math.round(Math.random()*1000000); }
</script> </head> <body bgcolor="green" align="center"> <input type="button" value="ChangePageColor" onclick="changePageColor();"/> </body> </html>