需求:点击页面的按钮,改变页面的颜色
思路:一先画出最简单的页面,二想办法获取页面的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>