简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to change the background color of a div using jQuery? [closed]
P粉585541766
P粉585541766 2023-09-16 21:25:27
0
1
510

I want to change the background color of a div at runtime using jquery. The div is showing but its background color is not changing. I don't know what's wrong with the code I wrote. 

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div id="color" style="width:100px;height:100px;background-color:grey;">Hello, world!</div>
        <script>
            function change_color()
            {
                r = Math.floor(Math.random()*256);
                g = Math.floor(Math.random()*256);
                b = Math.floor(Math.random()*256);

                rgb_ = "rgb(" + r + ", " + g + ", " + b + ")";

                $("#color").css("background-color", rgb_);
            }

            setInterval(change_color, 1000);
        </script>
    </body>
</html>

I want decimal rgb value.

P粉585541766
P粉585541766

reply all(1)
P粉854119263
P粉8541192632023-09-17 20:45:11 1 floor

You need to use the Math.floor function instead of floor (floor is not defined in the current code, that's why your r g b values ​​are invalid): 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id="color" style="width:100px;height:100px;background-color:grey;">Hello, world!</div>

    <script>
        function change_color() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var rgb_ = "rgb(" + r + ", " + g + ", " + b + ")";
            $("#color").css("background-color", rgb_);
        }

        setInterval(change_color, 1000);
    </script>
</body>
</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！