js 颜色随机切换

最新推荐文章于 2024-06-06 15:28:56 发布

转载最新推荐文章于 2024-06-06 15:28:56 发布 · 500 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dyd520/p/11304914.html

本文介绍了一种使用JavaScript实现的网页背景颜色自动随机切换的方法，包括两种生成随机颜色的函数：一种基于RGB模式，另一种通过生成六位数字拼接成十六进制颜色代码。文章还提供了完整的代码示例，展示了如何利用定时器每300毫秒自动更改页面背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成随机颜色

方法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>