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>
  • 相关阅读:
    9.过滤器的使用
    8.公共组件
    7.Props向子组件传递数据
    6.组件
    5.指令系统-事件
    4.指令系统
    SpringCloud入门
    springcloud注解
    was unable to refresh its cache! status = Cannot execute request on any known server
    集成第三方框架,报错NoSuchFieldError:logger
  • 原文地址:https://www.cnblogs.com/godtrue/p/5801071.html
Copyright © 2011-2022 走看看