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(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>
  • 相关阅读:
    write to logfile
    open and read a file content to a variable
    strategy
    Android 开机启动程序
    消息队列
    卡机音乐功能实现
    Android 2.0 开机动画文件分析
    多线程实例
    消息队列
    多线程实例
  • 原文地址:https://www.cnblogs.com/godtrue/p/5801071.html
Copyright © 2011-2022 走看看