js设置随机背景色

最新推荐文章于 2024-07-28 20:27:10 发布

大闸蟹~

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量398

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/YCHH1/article/details/125660690

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击切环背景色</button>

    <script>
        var btn = document.getElementById("btn");


        btn.onclick = function () {
            document.body.style.backgroundColor = getRanColor()
        }

        // // rgb 方式定义
        // function getRanColor() {
        //     var r = parseInt(Math.random() * 255);
        //     var g = parseInt(Math.random() * 255);
        //     var b = parseInt(Math.random() * 255);

        //     return "rgb(" + r + "," + g + "," + b + ")"
        // }


        // 使用 十六进制的方式修改
        function getRanColor() {
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
            // 声明一个变量来接收得到的每一个 十六进制数
            var str = "#";
            // 循环六次
            for (var i = 0; i < 6; i++) {
                // 每一次都获取一个随机的值
                // 想要获取随机的值,首先要获取随机索引
                var ranIdx = parseInt(Math.random() * arr.length);

                // console.log(ranIdx);
                // 拼接 六位
                str += arr[ranIdx];

                console.log(str, "str");
            }

            return str
        }

    </script>
</body>

</html>