需求：点击页面的按钮，改变页面的颜色

思路：一先画出最简单的页面，二想办法获取页面的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-改变页面的颜色（三）的更多相关文章

  1. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  2. selenium java ，执行js改变页面

    1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题 很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...

  3. js 改变页面元素的内容

    改变页面标签里的内容 (方法) innerText innerHTML (常用)   代码示例 <div></div> <p> 我是文字 <span>1 ...

  4. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  5. 【面试题】JS改变this指向的三种方法

    一.this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window 1.全局作用下 ...

  6. js 改变this指向的三种方法 bind call apply

    先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...

  7. JS-改变页面的颜色（一）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 简单的代码片段如下所示: &l ...

  8. JS-改变页面的颜色（二）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第一个例 ...

  9. js改变盒子大小(上下左右)分析

    js改变盒子大小 知识点 三个mouse事件:mousedown mousemove mouseup css的定位和cursor 思路 先解决单边问题识别范围,得到所选区域 event. 根据距离,判 ...

随机推荐

  1. candence 知识积累3

    1. PCB板型: 1.新建PCB:PCB design ,新建的类型为board ,输入名称和保存位置,设置图纸参数.网格参数. 2.建立PCB板外框:菜单Add下选择相应的工具.在Option选项 ...

  2. POI XSSF与HSSF的 使用区别

    首次写博客,希望能坚持下去,一点一滴的积累,内容不多也不深,但愿我的分享,能帮助和我一样的新人们解决问题 最近给项目中添加了一个导入excel表格的功能,然而在功能开发结束后测试,发现报错. 报错信息 ...

  3. Oracle的内存结构

    备注:本图片截图自“炼数成金” Oracle的体系结构分为内存结构.进程,磁盘文件. 内存结构分为SGA, PGA.SGA是系统全局区,是所有的用户共享区,PGA是某个用户的私有区. SGA分为sha ...

  4. OpenSSL - 文件和字符MD5加密实现

    OpenSSL安装: 1.github下载最新的OpenSSL:https://github.com/openssl/openssl 2.在linux解压压缩包 3.安装OpenSSL ./confi ...

  5. Python 调用百度翻译API

    由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...

  6. JS eval() 特殊用法

    最近项目有 有个模块 有若干功能菜单,这些菜单查询部分都是一样的,所以就像提取一个通用的查询页面然后使用$('#ele').load('../**.aspx #searchID', {}, funct ...

  7. hihoCoder-1036 （AC自动机模板题）

    题目大意:判断模式串中是否出现模板. 代码如下: # include<iostream> # include<cstdio> # include<queue> # ...

  8. RC上电复位时间计算

    高电平复位电路图 V0 为电容上的初始电压值:V1 为电容最终可充到或放到的电压值:Vt 为t时刻电容上的电压值.则,    Vt="V0"+(V1-V0)* [1-exp(-t/ ...

  9. js中的this指针（四）

    当一个函数前面加上 new 操作符来调用,此时 this 会被绑定到新生成的对象上. 这既是所谓的构造函数调用模式.

  10. ubnt+ros 接入无线

    ubnt+ros 接入无线 一.ubnt配置(UBNT NanoStation LOCOM2 LOCO M2)1.ubnt接poe,转lan接到pc2.ubnt默认ip是192.168.1.20,用户 ...