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

思路：一先画出最简单的页面，二想办法获取页面的body节点，三想办法修改body节点的背景颜色属性，四通过一个方法获取随机的颜色值

          和第一个例子（JS-改变页面的颜色（一））相比仅仅是改变了生成颜色值的思路

简单的代码片段如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>Change Page Color Script</title>
  6.     <script>
  7.         /*
  8.           改变页面的背景颜色
  9.         */
  10.         function changePageColor()
  11.         {
  12.             //拿到body元素
  13.             var bodyArray=document.getElementsByTagName("body");
  14.             var body=bodyArray[0];
  15.             //修改body元素的背景颜色属性
  16.             body.setAttribute("bgcolor",getColorValue(6));
  17.         }/*
  18.           获取背景颜色的十六进制表示值，这个方法也是前段简单的验证码的编写思路
  19.         */
  20.         function getColorValue(len)
  21.         {
  22.             var colorValue = "#";
  23.             var charArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A', 'B', 'C', 'D', 'E', 'F');
  24.             for (var i = 0; i < len; i++)
  25.             {
  26.                 var charIndex = Math.floor(Math.random() * 16);
  27.                 colorValue += charArray[charIndex];
  28.             }
  29.             return colorValue;
  30.         }
  31.     </script>
  32. </head>
  33. <body bgcolor="green" align="center">
  34.     <input type="button" value="ChangePageColor" onclick="changePageColor();"/>
  35. </body>
  36. </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-改变页面的颜色（一）

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

  5. JS-改变页面的颜色（三）

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

  6. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  7. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  8. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  9. pyqt5 动画学习（二） 改变控件颜色

    上一篇我们通过  self.anim = QPropertyAnimation(self.label, b"geometry")创建了一个动画,改变了空间的大小,这次我们来改变控件 ...

随机推荐

  1. Apache+Tomcat构建Tomcat负载均衡集群

    一.环境介绍 二.安装后端服务器 三.安装前端Apache服务 四.配置Apache使用mod_jk模块实现代理及负载均衡 五.配置Apache基于mod_proxy模块实现代理及负载均衡 六.论坛安 ...

  2. js 中混乱this

    1.在HTML元素事件属性中inline方式使用this关键字:  <div onclick=" // 可以在里面使用this ">division element&l ...

  3. MySQL数据库1 - 基本概念及安装

    一.数据管理技术的产生和发展: 1.人工管理阶段 - 效率低,成本高(文字) 2.文件系统阶段 - 易于存储,处理速度快,数据形式丰富(文字,声音,图片...磁带,磁盘) 3.数据库系统阶段 - 易于 ...

  4. (转)PhoneGap开发环境搭建

    (原)http://www.cnblogs.com/Random/archive/2011/12/28/2305398.html PhoneGap开发环境搭建   项目中要用PhoneGap开发,了解 ...

  5. UML学习笔记1

    UML概述:是一种为面向对象软件设计提供的建模语言. 构成:事物things关系relationshs图diagrams UML事物:构件事物 行为事物 分组事物 注释事物 UML关系:依赖depen ...

  6. understanding Nhibernate Hilo

    http://stackoverflow.com/questions/2738671/please-explain-nhibernate-hilo http://stackoverflow.com/q ...

  7. HDU 5358 尺取法+枚举

    题意:给一个数列,按如下公式求和. 分析:场上做的时候,傻傻以为是线段树,也没想出题者为啥出log2,就是S(i,j) 的二进制表示的位数.只能说我做题依旧太死板,让求和就按规矩求和,多考虑一下就能发 ...

  8. systemtap折腾笔记

    在这货上花费了不少时间,都是受了@agentzh 大神的蛊惑:) 他写的nginx-systemtap-toolkit监测的数据很有价值,对于系统优化实在是利器. 最早折腾systemtap,是在Ub ...

  9. PAT (Advanced Level) Practise：1008. Elevator

    [题目链接] The highest building in our city has only one elevator. A request list is made up with N posi ...

  10. Linux 安装 node

    在 Linux 上安装 node,使用 Linux 编译后的版本最佳. 1.进入 node 官网,找到 Linux 版本下载,这里我们右键复制下载地址即可. 2.在 Linux 上,使用命令 curl ...