随机背景颜色的生成

最新推荐文章于 2024-04-19 15:48:00 发布

Sixteen_

最新推荐文章于 2024-04-19 15:48:00 发布

阅读量1.7k

点赞数

分类专栏：函数随机数文章标签：随机数随机背景颜色

本文链接：https://blog.csdn.net/Auyuer/article/details/73135478

版权

函数同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

随机数

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background:lavender;
            }
        </style>
    </head>
    <body>
        <button id="btn">替换背景颜色</button>
        <script type="text/javascript">
            window.onload=function(){       
                var oBtn=document.getElementById("btn");
                    function bg(){
                    //用rgb格式生成随机的颜色，rgb每一项的数字都是0到255,因此每一项的长度为256
                    //Math.random 生成0到1之间的随机数，与256相乘则会得到0到256之间的随机数
                    //再用Math.floor向下取整之后，则得到的是0到255的随机整数，则rgb(r,g,b)可以实现颜色的随机性
                        var r = Math.floor( Math.random()*256);
                        var b = Math.floor( Math.random()*256);
                        var g = Math.floor( Math.random()*256);
                        return "rgb("+r+","+g+","+b+")";
                    }
                oBtn.onclick=function(){
                //当我们点击切换按钮时，函数被调用，则背景颜色也就会随机改变
                    document.body.style.background=bg();
                }
            }
        </script>
    </body>
</html>