js基础-点击切换div背景颜色

最新推荐文章于 2025-04-27 18:31:12 发布

原创最新推荐文章于 2025-04-27 18:31:12 发布 · 7.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js

js特效专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用JavaScript编写的十六进制颜色随机生成器，通过简单的HTML和CSS实现了一个网页，用户可以通过点击页面来随机更换背景颜色，展示了如何在网页中应用随机颜色生成算法。

随机产生一个十六进制的颜色值，封装成一个函数，进行调用！

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            height: auto;
            background-color: coral;
            text-align: center;
        }
        
        div strong {
            display: block;
            font-size: 30px;
            padding-top: 20%;
        }
    </style>
</head>

<body>
    <div><strong>点击随机切换颜色</strong></div>

    <script>
        function changeBgColor() {
            var str = "#";
            var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
            for (var i = 0; i < 6; i++) {
                var result = parseInt(Math.random() * 16);
                str += arr[result];
            }
            return str;
        }
        var div = document.querySelector('div');
        div.onclick = function() {
            div.style.backgroundColor = changeBgColor();
        }
    </script>
</body>

</html>

在这里插入图片描述