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

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

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permiss ...

  2. HDFS中Java的API使用测试

    import java.io.IOException; import java.util.Arrays; import java.util.Date; import java.util.Scanner ...

  3. Objective-C学习笔记－第一天(3)

    话不多说,学了这么多,写个快速排序先. 除了快排,以后有时间还要加堆排.归并等等. 今天学了有,类.协议.语法. 因为算法类,不止一个算法.所以新建一个Algorithm(算法)协议: #import ...

  4. Html5简单存储localStorage和sessionStorage

    localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 1.localStorage : localStorage 没有时间限制的 ...

  5. oop、configparser、xml模块

    本节大纲:一:在python中,有两种编程思想.1:函数式编程.2:oop.无论是函数式编程还是oop都是相辅相成.并不是说oop比函数式编程就好.各有各的优缺点.在其他语言中java等只能以面向对象 ...

  6. 使用notepad++进行格式转换

    由于历史原因,导致Windows.Unix/Linux.Mac三者之间,对于文本中所用回车换行符,表示的方法,都不一样.这就导致了很多人都会遇到回车换行符的困惑,同时需要在不同格式间进行转换. 1)查 ...

  7. libevent库1.4升级到2.0时无法flush的解决办法

    libevent的接口兼容性做的还算不错,基本上替换一下就转到新版本了.但是,强制flush数据的时候出了问题.目前的应用场景是,遇到顶号登录这种情形,先用bufferevent_write向客户端发 ...

  8. JAVA 编码中文简述

    中文编码问题虽然是个老问题,但对不熟悉的人来说还是不好处理的.不过Java中已经有了一套比较成熟的解决方案. 首先对中文编码格式予以简单介绍:中文编码有三套国标:GB2312,GBK,GB18030, ...

  9. java文件下载

    /** * zip 导出 * @param response * @param zipName * @throws Exception */ private void outZip(HttpServl ...

  10. MongoDB学习笔记二：创建、更新及删除文档

    插入并保存文档 对目标集使用insert方法插入一个文档: > db.foo.insert({"bar" : "baz"}) 这个操作会给文档增加一个&q ...