生成随机颜色

方法1：RGB模式

function randomColor1()

            {

                var r=Math.floor(Math.random()*256);

                var g=Math.floor(Math.random()*256);

                var b=Math.floor(Math.random()*256);

                //在控制器中显示出随机生成的颜色(可以删除,无影响)

                console.log("rgb("+r+","+g+","+b+")");

                //返回随机生成的颜色

                return "rgb("+r+","+g+","+b+")";

            }

方法2：随机生成6位[0-9]进行拼接

function randomColor2()

            {

                var str1="#";

                for (var i=0;i<6;i++) {

                    str1+=Math.floor(Math.random()*9);

                }

                //在控制器中显示出随机生成的颜色(可以删除,无影响)

                console.log(str1);

                //返回随机生成的颜色

                return str1;

            }

自动随机切换页面颜色

采用定时器，每300毫秒调用一次。

        //存放定时器的变量

            var timer;

            //创建定时器，自动修改背景颜色

            function createTimer(){

                //创建定时器，并调用方法randomColor1(可修改为randomColor2)

                timer=window.setInterval(function(){

                    //获取body

                    var body1=document.getElementsByTagName("body");

                    //修改body的背景样式

                    body1[0].style.backgroundColor=randomColor1();

                },300);

                //定时器开启,自动修改背景按钮，不可用    停止自动修改背景  可用

                var but1=document.getElementById("but3");

                but1.disabled=false;

                var but2=document.getElementById("but4");

                but2.disabled=true;

            }

            //清除定时器

            function clearTimer(){

                //清除定时器

                window.clearInterval(timer);

                //定时器开启,自动修改背景按钮，可用    停止自动修改背景，不可用

                var but1=document.getElementById("but3");

                but1.disabled=true;

                var but2=document.getElementById("but4");

                but2.disabled=false;

            }

实现页面背景颜色随机改变（完整代码）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            window.onload=function (){

                //页面开始随机切换页面背景(随机色)

                createTimer();

            }

            //按钮1:切换颜色不同方法

            function but1(strColor){

                //获取body节点

                var body1=document.getElementsByTagName("body");

                //修改body的背景颜色

                body1[0].style.backgroundColor=strColor;

            }

            //生成随机数：RGB模式

            function randomColor1()

            {

                var r=Math.floor(Math.random()*256);

                var g=Math.floor(Math.random()*256);

                var b=Math.floor(Math.random()*256);

                //在控制器中显示出随机生成的颜色(可以删除,无影响)

                console.log("rgb("+r+","+g+","+b+")");

                //返回随机生成的颜色

                return "rgb("+r+","+g+","+b+")";

            }

            //生成随机色2:随机生成6位[0-9]进行拼接

            function randomColor2()

            {

                var str1="#";

                for (var i=0;i<6;i++) {

                    str1+=Math.floor(Math.random()*9);

                }

                //在控制器中显示出随机生成的颜色(可以删除,无影响)

                console.log(str1);

                //返回随机生成的颜色

                return str1;

            }

            //存放定时器的变量

            var timer;

            //创建定时器，自动修改背景颜色

            function createTimer(){

                //创建定时器，并调用方法randomColor1(可修改为randomColor2)

                timer=window.setInterval(function(){

                    //获取body

                    var body1=document.getElementsByTagName("body");

                    //修改body的背景样式

                    body1[0].style.backgroundColor=randomColor1();

                },300);

                //定时器开启,自动修改背景按钮，不可用    停止自动修改背景  可用

                var but1=document.getElementById("but3");

                but1.disabled=false;

                var but2=document.getElementById("but4");

                but2.disabled=true;

            }

            //清除定时器

            function clearTimer(){

                //清除定时器

                window.clearInterval(timer);

                //定时器开启,自动修改背景按钮，可用    停止自动修改背景，不可用

                var but1=document.getElementById("but3");

                but1.disabled=true;

                var but2=document.getElementById("but4");

                but2.disabled=false;

            }

        </script>

    </head>

    <body>

        <button id="but1" onclick="but1(randomColor2())">手动修改背景1</button>

        <button id="but2" onclick="but1(randomColor2())">手动修改背景2</button><br/>

        <button id="but3" onclick="clearTimer()">停止自动修改背景</button>

        <!--disabled 标签不可用  true|false-->

        <button id="but4" onclick="createTimer()">自动修改背景</button>

    </body>

</html>

js 颜色随机切换的更多相关文章

  1. js图片随机切换

    使用js做到随机切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. js设置随机切换背景图片

    <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg&q ...

  3. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  4. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

  5. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  6. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  7. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  8. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  9. iOS-点击视图，视图背景颜色随机更改

    一.效果图 二.代码 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the v ...

随机推荐

  1. Leetcode题目617：合并二叉树（递归-简单）

    题目描述: 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新 ...

  2. Java 实例 - instanceof 关键字用法

    Java 实例 - instanceof 关键字用法 instanceof 是 Java 的一个二元操作符,类似于 ==,>,< 等操作符. instanceof 是 Java 的保留关键 ...

  3. 2019 SDN上级第五次作业

    1.浏览RYU官网学习RYU控制器的安装和RYU开发入门教程,提交你对于教程代码的理解,包括但不限于: 描述官方教程实现了一个什么样的交换机功能? 答:官方教程实现了一个将接收到的数据包发送到所有端口 ...

  4. HTTP的POST提交的四种常见消息主体格式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...

  5. 每天一个linux命令：top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  6. NPM 私服

    下载https://nodejs.org/en/download/ linux binaries x64版本xz -d ....xztar -xvf ....tar导入path修改~/.bashrc加 ...

  7. 各种修改Mysql字符集

    以下方法最好在没有数据时操作,否则有可能导致乱码.如果已有数据,做好备份尝试Mysql迁移由于字符集导致乱码的数据 创建测试环境 mysql> create database test_db; ...

  8. [转]Postgres-XL 10r1英文文档

    Postgres-XL 是一个完全满足ACID的.开源的.可方便进行水平扩展的.多租户安全的.基于PostgreSQL的数据库解决方案. Postgres-XL 可非常灵活的应用在各类场景中,比如: ...

  9. 动态绑定easyui datagrid列名

    根据实时数据在同一个DataGrid中显示不同字段,本身easyui并没有支持动态绑定列名,只有show属性显示或隐藏某字段.今天在网上看到直接修改easyui类库动态绑定列名的方法,废话不多说直接借 ...

  10. Python之汉诺塔递归运算

    汉诺塔问题是一个经典的问题.汉诺塔(Hanoi Tower),又称河内塔,源于印度一个古老传说.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆 ...