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

思路：一先画出最简单的页面，二想办法获取页面的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. Oracle创建，删除用户与表空间

    1.创建表空间与用户 a:创建数据表空间 create tablespace user_data logging datafile 'D:\oracle\product\10.2.0\oradata\ ...

  2. AD 10 原理图编译错误

    在编译原理图时,经常会出现以下错误和警告,这里简单的累出一些错误和警告的原因: 1.floating net labels,这个是应为网标防止错误,应该将网标放在I/O或这连线的端点,或者是网标表错了 ...

  3. php 无法连接mysql

    sql_connect,sqli_connect, 或new sqli() 无法建立mysql连接 1. php.ini 中 ; extension=php_mysql.dll 和 ; extensi ...

  4. 【LeetCode OJ】Convert Sorted Array to Binary Search Tree

    Problem Link: http://oj.leetcode.com/problems/convert-sorted-array-to-binary-search-tree/ Same idea ...

  5. SqlServer性能优化：创建性能监视器（二）

    添加三个选项: 下一步就可以了 Sql跟踪的模板: 跟踪Sql 语句的执行情况: 使用刚才的新建的模板: 用到的Sql语句: select * from [Sales].[SalesOrderDeta ...

  6. 如何修改Eclipse在Debug时背景色

    比较喜欢暗色的Eclipse主题,安装了Eclipse color theme,使用了Oblivion这个黑色背景的主题. 更换了暗色的Eclipse主题后,Debug时看不清文字: 需要更背景颜色, ...

  7. Anchor 对象和document对象

    <script type="text/javascript"> function chanklink(){ document.getElementById(" ...

  8. JdbcUtils 系列1

    1.开发前准备 创建java pro为dbutils_1,没有lib目录,建一个即可 /dbutils_1/lib/mysql-connector-java-5.0.8-bin.jar 数据库搭建c3 ...

  9. Visual Studio 启动修复命令

    今天VS启动不了了,连命令行的 devenv.exe /? 都执行不了,看不到帮助命令了,记性不好,以前看过但没记住呀,还好我装了两个不同版本的VS, 另一个VS的帮助命令还是可以看到的.虽然修复了, ...

  10. HTTP请求中的form data和request payload的区别

    HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...