生成随机颜色

方法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. python 迷宫问题

    # -*- coding:utf- -*- from collections import deque # 引入队列 maze = [ [,,,,,,,,,], [,,,,,,,,,], [,,,,, ...

  2. Tkinter 之Canvas画布

    一.参数说明 参数 作用 background(bg) 指定 Canvas 的背景颜色 borderwidth(bd) 指定 Canvas 的边框宽度 closeenough 指定一个距离,当鼠标与画 ...

  3. 全局设置页面颜色 返回按钮样式 iOS

    思路 1.建个UIViewController的分类 2.hook方法viewDidLoad(Aspects是三方库 可以不用) 3.看下面蓝色部分代码 #import "UIViewCon ...

  4. SpringCloud介绍及入门一

    springcloud是什么 基于spring boot实现的服务治理工具包,管理和协微服务 把别人的东西拿来组合在一起,形成各种组件 微服务协调者[service registtry注册中心 Eur ...

  5. php如何生成 uuid（总结）

    php如何生成 uuid(总结) 一.总结 一句话总结: UUID的全拼为“Universally Unique Identifier”,可以译为“通用唯一识别码”. UUID是指在一台机器上生成的数 ...

  6. Oracle 11c下载 及连接到OracleDB的简单程序

    Oracle官网总是不太贴心.还是网友贴心. https://pan.baidu.com/s/1ZCFLUi4Ti_WUYOFR3gB2dA 是11g版本下载包,下载下来解压就能用了. 安装完毕后,驱 ...

  7. MediaPlayer: 在不同控件之间实现视频的无缝切换的方法

    最近使用MediaPlayer + TextureView 实现了一个视频播放器,并且实现了它的横竖屏切换的效果,唯一美中不足的是在横竖屏切换的时候画面会卡顿一下,虽然也不影响播放,但是怕测试会报Bu ...

  8. It’s worth noting值得注意的是

    It’s worth noting that in JavaScript applications the Model is often connected via Ajax to a back-en ...

  9. @Component默认是单例还是多例？

    @Component默认是单例还是多例?   答: @Component注解默认实例化的对象是单例,如果想声明成多例对象可以使用@Scope("prototype") @Repos ...

  10. QML显示圆形图片

    Item {//一个圆形图片 width: parent.width height: parent.height Image { id: rdJpg anchors.centerIn: parent ...