需求：点击页面的按钮，改变页面的颜色
思路：一先画出最简单的页面，二想办法获取页面的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>
时间： 2024-10-07 22:41:01