js点击按钮为元素随机字体颜色和背景色

古城微笑少年丶 2023-06-05 08:10 2阅读 0赞

写两个button和一个div，点击按钮分别改变背景色和前景色（字体颜色）。产生的是一个随机颜色。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        body {
            text-align: center;
        }
        #wrap {
            width: 200px;height: 200px;border: 1px solid black;text-align: center;
            margin: 10px auto;font-size: 30px;
        }
        button {
            width: 150px;height: 40px;color: black;text-align: center;
            margin: 10px;
        }
        </style>
    </head>
    <body>
        <button id="btn1">change bgcolor</button><br>
        <button id="btn2">change color</button>
        <div id="wrap">
            test text
        </div>
    
        <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var wrap = document.getElementById("wrap");
        // 获取元素
    
        function getColor(){
            // 封装随机生成颜色的函数作为返回值
            return Math.round(Math.random()*255);
        }
    
        function giveColor(){
            var red = getColor();
            var green = getColor();
            var blue = getColor();
            // 获取三个rgb的值
            var color= "rgb(" + red + "," + green + "," + blue + ")";
            // 吧rhb值拼接在一起给变量color
            return color;
            // 返回color
        }
    
        btn1.onclick = function(){
            wrap.style.backgroundColor = giveColor();
            // btn1注册点击时间，改变wrap的背景色
        }
    
        btn2.onclick = function(){
            wrap.style.color = giveColor();
            // btn1注册点击时间，改变wrap的字体颜色
        }
    
        </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/sandraryan/p/11338036.html