JavaScript中，获取元素 ,dom操作，并绑定事件触发，让窗口随机变化颜色，颜色为rgb()

最新推荐文章于 2023-04-14 10:35:45 发布

ryipei

最新推荐文章于 2023-04-14 10:35:45 发布

阅读量575

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40739261/article/details/115384281

版权

JS 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

<!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>
    <style>
        .father {
            display: flex;

        }

        p {
            width: 27%;
            height: 100px;
            border: 1px solid white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="father">
        <p>第一个P</p>
        <p>第二个P</p>
        <p>第三个P</p>
        <p>第四个P</p>
    </div>
    <button id="btn">点击按钮窗口颜色将变化</button>
    <script>
        //  1、 获取元素，绑定事件
        var Btn = document.getElementById("btn");
        var op = document.getElementsByTagName("p");

        Btn.onclick = function () {


            for (var i = 0; i < op.length; i++) {
                op[i].style.background = Rgb();     // 每个 p 标签背景色，随机
            }


        }
        // 封装一个函数，函数返回 rgb()随机颜色
        function Rgb() {
            // agb(num1,num2,num3);  三个参数随机获取
            var num1 = parseInt(Math.random() * 256);
            //console.log(num1);
            var num2 = parseInt(Math.random() * 256);
            //console.log(num2);
            var num3 = parseInt(Math.random() * 256);
            //console.log(num3);
            //console.log("rgb"+"("+num1+","+num2+","+num3+")");
            return "rgb" + "(" + num1 + "," + num2 + "," + num3 + ")";

        }
    </script>
</body>

</html>

ryipei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中，获取元素 ,dom操作，并绑定事件触发，让窗口随机变化颜色，颜色为rgb()

<!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>D.
复制链接

扫一扫

专栏目录