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

思路：一先画出最简单的页面，二想办法获取页面的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. （转）oracle 存储过程 带游标作为OUT参数输出

    (转)oracle 存储过程 带游标作为OUT参数输出 存储过程返回OUT参数的游标 例子. 包中带过程 要自己定义一个type [cur_name] is ref cursor游标,返回的时候就直接 ...

  2. 例子：Alarm Clock with voice Commands Sample

    通过本例子学习: 如何使用自定义字体文件(.TTF) 如何播放声音 动画的使用 Speech 设置闹铃 应用 设置 数据存储到IsolatedStorage 如何使用自定义字体文件(.TTF) < ...

  3. poj3159 差分约束 spfa

    //Accepted 2692 KB 1282 ms //差分约束 -->最短路 //TLE到死,加了输入挂,手写queue #include <cstdio> #include & ...

  4. POJ 1637 Sightseeing tour （混合图欧拉路判定）

    Sightseeing tour Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6986   Accepted: 2901 ...

  5. Term_Application

    1 CRM(Customer Relationship Management)客户关系管理: (对ERP下游管理不足的补充) 是一个获取.保持和增加可获利客户的方法和过程. 市场营销.销售管理.客户关 ...

  6. javascript之小积累-.-typeof与instanceof的区别

    1.typeof 是获取一个变量或表达式的类型,返回的值通常是string, number, boolean, object(null, 数组, 对象), function, undefined,可以 ...

  7. Linux线程-pthread_join

    pthread_join用来等待另一个线程的结束,函数原型如下: extern int pthread_join __P ((pthread_t __th, void **__thread_retur ...

  8. PHP聊天室框架

    内容和教程可以在这个网址查看 http://www.workerman.net/workerman-chat

  9. codeForce-589D Boulevard（判断线段是否相交）

    题目大意:n个人.一个区间.每个人都会在某个时间段内按相同的速度(所有人的速度都一样,都是1或-1)在他的区间内从一个端点走到另一个端点(只走一次).问每个人会与几个人碰面. 题目分析:将时间看成一个 ...

  10. 关于tomcat7下websocket不能使用

    tomcat启动时提示 信息: JSR 356 WebSocket (Java WebSocket 1.0) support is not available when running on Java ...