生成随机颜色

方法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. Java for循环的语法和执行顺序

      关于java的for循环想必大家非常熟悉,它是java常用的语句之一.for循环是最灵活也是最常用的循环结构,表达式一般如下: for(表达式1;表达式2;表达式4){ 表达式3; } 执行顺序: ...

  2. 小程序弹出toast,怎么优化代码

    因为toast是会重复调的,所以可以直接写在app里面 在所有的子页面去调这个就好了. 如果是设的none那就是 设置的 就是

  3. Oracle plsql 触发器 查询/启用/停止

    在PLSQL中查询某个表的触发器脚本 select * from user_triggers where table_name='xxx' oracle触发器的启用和停用 1.禁用 table_nam ...

  4. 【原】Python基础-函数

    #不定长参数,这里prams是一个元组集合def print_params(*prams): for e in prams: print(e) print(prams) #输出('xxx', (1, ...

  5. [ambari环境搭建]（未完待续）

    [安装] https://blog.csdn.net/Happy_Sunshine_Boy/article/details/86595945#commentBox https://www.jiansh ...

  6. Spring —— @Async注解的使用

    参考文档 Spring Boot使用@Async实现异步调用:自定义线程池 Spring Boot使用@Async实现异步调用:ThreadPoolTaskScheduler线程池的优雅关闭

  7. ubuntu video and audio

    推荐你直接安装ubuntu-studio系统.里面有默认安装了很多多媒体软件,主要集中在4个方面1.音频编辑:Jack, Ardour, Audacity, Qtractor. Hydrogen, Y ...

  8. js中的一些隐式转换和总结

    js中的不同的数据类型之间的比较转换规则如下: 1. 对象和布尔值比较 对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字 [] == true; //false [] ...

  9. 连接池大小调优 原创： ImportNew ImportNew 2017-06-07

    连接池大小调优 原创: ImportNew ImportNew 2017-06-07

  10. Pattern 和 Matcher

    作用:应用这个 Pattern 和 Matcher 可以完成字符串获取功能 使用: // 获取模式器对象 Pattern p = Pattern.compile("a*b") ; ...