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

思路：一先画出最简单的页面，二想办法获取页面的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. SSH basics

    SSH, Secure SHell, was designed and created to provide the best security when accessing another comp ...

  2. CSS3实现轮播切换效果

    实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果.   看 ...

  3. python执行linux的shell命令

    python执行shell脚本常用的方法 import os val=os.system("shell语句")  >>> val=os.system(" ...

  4. Linux Kernel Version Numbering

    Because there are numerous revisions and releases of the Linux kernel and new ones are developed at ...

  5. 移动平台对 meta 标签的定义

    一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...

  6. C语言基本数据类型

    一.数据类型与“模子” short.int.long.char.float.double 这六个关键字代表C 语言里的六种基本数据类型. 怎么去理解它们呢? 举个例子:见过藕煤球的那个东西吧?(没见过 ...

  7. null、空对象和undefined

    null:是对象,但是空引用(不指向任何对象) 空对象:是对象,但它的值是指向没有任何属性的对象的引用 undefined:未定义,所以不是对象,本身被定义为“undefined”这一特殊类型 1. ...

  8. Linux字符界面的优势

    优势一:字符界面占用的系统资源更少,更加适合服务器 优势二:字符界面减少了出错.被攻击的可能性(一.二决定了服务器一般不装图形界面,安全稳定优先)

  9. 事务的ACID特性

    事务(Transaction)是并发控制的基本单位.    所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位.例如,银行转帐工作:从一个帐号扣款并使另一个帐号增 ...

  10. Java 报表之JFreeChart(第一讲)

    1.利用 JFreeChart 创建垂直柱状报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; import or ...