生成随机颜色

方法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. python3编程基础之一：关键字

    在学习编程的过程中每种语言都会有一些特殊的字母组合在本语言中表示特定的含义,这种字母组合就是关键字.原则上,关键字是无法被重复定义的,否则,语言在应用中,就无法正确确定标号的意义了. 1.关键字的获取 ...

  2. mysql8安装与卸载

    参考: https://www.cnblogs.com/zxwen/p/9448797.html https://blog.csdn.net/weixin_30073553/article/detai ...

  3. linux pthread_cond_signal

      pthread_cond_signal函数的作用是发送一个信号给另外一个正在处于阻塞等待状态的线程,使其脱离阻塞状态,继续执行.如果没有线程处在阻塞等待状态,pthread_cond_signal ...

  4. wcf 错误提示

    wcf 不弹出错误提示,只显示“服务器处理请求时遇到错误.有关构造有效服务请求的内容,请参阅服务帮助页”,添加以下节点可以弹出错误提示. <serviceDebug includeExcepti ...

  5. IO流的标准处理代码

    FileInputStream fis = null; FileOutputStream fos = null; try { fis = new FileInputStream("aaa.t ...

  6. com.alibaba.fastjson.JSONObject;的使用

    转: com.alibaba.fastjson.JSONObject;的使用 2018-11-04 23:51:23 mameng1998 阅读数 6404更多 分类专栏: java   1  POM ...

  7. Civil 3D百度云地址

    Civil 3D 2018百度云地址 https://pan.baidu.com/s/1edeVhG Civil 3D 2019注册机百度云地址 链接: https://pan.baidu.com/s ...

  8. markdown 测试博客发布

    这是一个测试页面 无序列表 tet test 有序列表 特使团 tetst 引用 This is a test 插入图片 插入链接 baidu 粗体 这是粗体 斜体 这是斜体 表格 IP VIP 备注 ...

  9. 【Leetcode_easy】806. Number of Lines To Write String

    problem 806. Number of Lines To Write String solution: class Solution { public: vector<int> nu ...

  10. 多线程调用有参数的方法---c# Thread 与 Task

    C#实现多线程的方式:Task——任务   简介 .NET 4包含新名称空间System.Threading.Tasks,它 包含的类抽象出了线程功能. 在后台使用ThreadPool. 任务表示应完 ...