zoukankan      html  css  js  c++  java
  • JS-改变页面的颜色(三)

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

    思路:一先画出最简单的页面,二想办法获取页面的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>
  • 相关阅读:
    Web APIs——DOM
    案例:动态生成表格
    案例:简单版发布留言功能
    案例:下拉菜单功能
    案例:tab栏切换功能(原生JS写法)
    时间复杂度
    ubuntu下安装LNMP
    btree索引和hash索引的区别
    StandardServer.await: Invalid command 'GET / HTTP/1.1' received
    MySQL----触发器
  • 原文地址:https://www.cnblogs.com/godtrue/p/5801115.html
Copyright © 2011-2022 走看看