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

思路：一先画出最简单的页面，二想办法获取页面的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. 【matlab】用matlab 保存带标记图像、图片的方法总结

    最近看了一些用matlab对图形图片进行保存的帖子和资源,关于图像保存的方法给大家分享一下这些方法是大家所使用方法的一个总结. 如今常用的方法有三种printf,imwrite,saveas下面分别介 ...

  2. java SE 常用的排序算法

    java程序员会用到的经典排序算法实现 常用的排序算法(以下代码包含的)有以下五类: A.插入排序(直接插入排序.希尔排序) B.交换排序(冒泡排序.快速排序) C.选择排序(直接选择排序.堆排序) ...

  3. (转)javascript匿名函数的写法、传参和递归

    (原)http://www.veryhuo.com/a/view/37529.html (转)javascript匿名函数的写法.传参和递归 http://www.veryhuo.com 2011-0 ...

  4. Erlang 103 Erlang分布式编程

    Outline 笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-11-23 A Outl ...

  5. threadpool 的配置实用

    //spring mvc文件中的配置 <!-- ThreadPoolExecutor --> <bean id="threadPoolTaskExecutor" ...

  6. Kraken taxonomic sequence classification system

    kraken:是一个将分类标签打到短DNAreads上的分类序列器.

  7. LeetCode() 数字1的个数

    int ones = 0; for (long m = 1; m <= n; m *= 10) { long a = n/m, b = n%m; ones += (a + 8) / 10 * m ...

  8. ATMEL处理器自带USB CDC的Win7驱动问题

    [背景] 很久以前使用ATMEL的处理器开发了一款设备,通过处理器本身的功能,借助USB在PC端虚拟一个串口出来,实现和上位机软件的通信,和基本的参数设置和数据读取功能. 这个功能就是ATMEL官网上 ...

  9. 《统计推断（Statistical Inference）》读书笔记——第2章 变换与期望

    第二章引入了两个重要问题,随机变量的期望和随机变量的变换.期望又引申出“矩”的概念,矩是统计学理论分析的一个重要关键词,而随机变量的变换是研究复杂统计现象的重要工具.下面是这一章的思维导图

  10. knockout 第一个实例visible

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...