生成随机颜色

方法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. 全国行政区域代码（免费来拿） xls格式 可直接导入

    全部区域代码 地址:https://pan.baidu.com/s/1Elz-zW_nLS8YR8GZAn3WRw 提取码:ze3s

  2. OpenFOAM Tutorial Standard Solvers【转载】

    转载自:http://www.cnblogs.com/fortran/articles/1996927.html boundaryFoam Steady-state solver for 1D tur ...

  3. beyond compare秘钥被禁

    错误提示:This license key has been revoked xxxxx 即: Windows 系统: 解决方法: 删除以下目录中的所有文件即可. C:\Users\Administr ...

  4. OpenTK学习笔记(2)-工作窗口的三种方法创建方法（winfrom下类的形式创建）

    参考资料: https://www.codeproject.com/Articles/1167212/OpenGL-with-OpenTK-in-Csharp-Part-Initialize-the- ...

  5. $createElement实现自定义弹窗

    <el-button type="text" @click="open4">点击打开 Message Box</el-button> m ...

  6. LC 992. Subarrays with K Different Integers

    Given an array A of positive integers, call a (contiguous, not necessarily distinct) subarray of A g ...

  7. Flex 布局的最简单表单

    http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html https://www.cnblogs.com/grt322/p/8531882.ht ...

  8. 原生app是什么意思？

    原生的就是用 Android 和ios 写的 完全符合手机系统 其他的都是通过各种工具对代码转换为手机系统可以识别

  9. 阶段5 3.微服务项目【学成在线】_day18 用户授权_05-方法授权-方法授权测试

    这是我们课程的服务里面 加了授权的方法 重启课程管理的服务 首先需要登陆 在redis复制token 访问课程列表 用最新复制的令牌 最新token可以 调用teachplan方法 调用 一个没加注解 ...

  10. 学习TypeScript 笔记

    TypeScript 什么是TypeScript TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程 ...