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

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

    以上数据是使用wiglewifi软件收集的数据,把全部数据导出为KML格式,使用Google地球显示的,当然在大陆地区Google地球有些不正常,我使用的是lantern 以前使用lantern总是不 ...

  2. NAT模式下用secureCRT连接虚拟机

    VMWare制作学习系统,或布置模拟网络群组环境,已经比较流行. 注意主机端口要设置成为不同2122,虚拟机端口设置成22 笔者为了给项目组同事,提供一个练习ssh远程连接操作,及方便抓图交流的环境, ...

  3. 【LeetCode OJ】Path Sum

    Problem Link: http://oj.leetcode.com/problems/path-sum/ One solution is to BFS the tree from the roo ...

  4. Git工作流指南：Pull Request工作流

    参考地址:http://blog.jobbole.com/76854/ Pull Requests是Bitbucket上方便开发者之间协作的功能.提供了一个用户友好的Web界面,在集成提交的变更到正式 ...

  5. Windows Server 2012 R2在桌面上顯示我的電腦等圖示

    Windows Server 2012 R2在桌面上顯示我的電腦等圖示   從Windows2012開始,微軟取消了服務器桌面個性化選項,如何重新調出配置界面,可以使用微軟命令調出.方法如下: 同時按 ...

  6. SQL 金额千分位显示

    第一种:select convert(varchar,cast(_money AS MONEY),1) AS _money -----带小数点的第二种: select reverse(stuff(re ...

  7. ex26 纠正练习

    题目中给出的代码如下: def break_words(stuff): """This function will break up words for us." ...

  8. MapReduce介绍

    一.MapReduce模型 1.MapReduce是大规模数据(TB级)计算的利器,Map和Reduce是它的主要思想,来源于函数式编程语言. 2.Map负责将数据打散,Reduce负责对数据进行聚集 ...

  9. HEX格式数据转换成十六进制字符串

    /** * Hex格式数据转换成十六进制字符串 * @param src */ public void bytesToHexString(byte[] by){ StringBuilder strin ...

  10. Qt之阴影边框(转)

    原文地址:http://blog.sina.com.cn/s/blog_a6fb6cc90101eoc7.html 阴影边框很常见,诸如360以及其他很多软件都有类似效果,了解CSS3的同学们应该都知 ...