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

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

        }/*

          获取背景颜色的十六进制表示值，这个方法也是前段简单的验证码的编写思路

        */

        function getColorValue(len)

        {

            var colorValue = "#";

            var charArray = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A', 'B', 'C', 'D', 'E', 'F');

            for (var i = 0; i < len; i++)

            {

                var charIndex = Math.floor(Math.random() * 16);

                colorValue += charArray[charIndex];

            }

            return colorValue;

        }

    </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-改变页面的颜色（一）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的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. MYSQL中关于日期处理的函数

    < DOCTYPE HTML PUBLIC -WCDTD HTML TransitionalEN> MySQL数据库中SQL语句中 关于日期.时间\时间戳的函数   一 MySQL 获得当 ...

  2. spring-mvc xml文件的最基本配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  3. 安装java和jmeter

    win7 64位 安装java 1.下载java开发工具包JDK,在硬盘创建java文件夹,在里面创建jdk1.8.0_101和jre1.8.0_101 2.安装jdk,第一个路径装在jdk1.8.0 ...

  4. jQuery绑定以及解除时间方法总结，以及事件触发的方法

     一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数     ...

  5. 关于if(a<b<c)判断的问题

    由于判断时的执行顺序,不要写成if(a<b<c)这种形式,很有可能得出的结果与我们想像的结果不一致,要写成if(a<b && b<c)!

  6. Hive 实战(2)--hive分区分桶实战

    前言: 互联网应用, 当Mysql单机遇到性能瓶颈时, 往往采用的优化策略是分库分表. 由于互联网应用普遍的弱事务性, 这种优化效果非常的显著.而Hive作为数据仓库, 当数据量达到一定数量时, 查询 ...

  7. UVA 11235 频繁出现的数值 RMQ

    题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  8. Date get period

    /** * get period for last year * @param time * @return */ public static DatePeriodDTO getLastYear(lo ...

  9. // 开始无限播放 ViewPager

    public class MainActivity extends Activity { private ViewPager vp;    private Handler handler = new ...

  10. Extjs各版本的下载链接

    Extjs的版本繁多,本文收集了Extjs各个版本的下载链接,包括官网和非官网的,以及各种汉化版api,欢迎大家下载分享. Extjs最新版下载链接:http://www.sencha.com/pro ...