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

思路：一先画出最简单的页面，二想办法获取页面的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. 将字符串拆分为id

    Sql : alter function [fn_splitSTR] ( ), -- 5,6,7 ) -- ',' ) )) as begin declare @splitlen int begin ...

  2. Data storage on the batch layer

    4.1 Storage requirements for the master dataset To determine the requirements for data storage, you ...

  3. 动态获取Android权限

    @TargetApi(23)private void showPhotoDialog() { if (dialog != null && dialog.isShowing()) { d ...

  4. windows核心编程---第二章 字符和字符串处理

        使用vc编程时项目-->属性-->常规栏下我们可以设置项目字符集合,它可以是ANSI(多字节)字符集,也可以是unicode字符集.一般情况下说Unicode都是指UTF-16.也 ...

  5. 黑马程序员：Java编程_面向对象

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 面向对象和面向过程都是一种思想,面向过程强调的是功能行为,面向对象是将功能封装进 ...

  6. js创建对象的6种方式

    一.工厂模式 function createStudent(name,age){ var o=new Object(); o.name=name; o.age=age; o.myName=functi ...

  7. python数据结构与算法——图的广度优先和深度优先的算法

    根据维基百科的伪代码实现: 广度优先BFS: 使用队列,集合 标记初始结点已被发现,放入队列 每次循环从队列弹出一个结点 将该节点的所有相连结点放入队列,并标记已被发现 通过队列,将迷宫路口所有的门打 ...

  8. Android-->猜拳小游戏

    --> 简单的 页面跳转 和 点击事件 的实现... --> AndroidManifest.xml <?xml version="1.0" encoding=& ...

  9. Flume 实战(2)--Flume-ng-sdk源码分析

    具体参考: 官方用户手册和开发指南 http://flume.apache.org/FlumeDeveloperGuide.html *) 定位和简单例子 1). Flume-ng-sdk是用于编写往 ...

  10. linux 启动weblogic的某服务报错

    问题如标题所示, 错误信息主要包括: weblogic.store.PersistentStoreException: [Store:280073]The file store"WLS_DI ...