码迷,mamicode.com
首页 > Web开发 > 详细

JS-改变页面的颜色(三)

时间:2016-08-23 23:27:32      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

需求:点击页面的按钮,改变页面的颜色

思路:一先画出最简单的页面,二想办法获取页面的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>

 

JS-改变页面的颜色(三)

标签:

原文地址:http://www.cnblogs.com/godtrue/p/5801115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!