标签:
需求:点击页面的按钮,改变页面的颜色
思路:一先画出最简单的页面,二想办法获取页面的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>
标签:
原文地址:http://www.cnblogs.com/godtrue/p/5801115.html