随机产生十六进制所对应的颜色

最新推荐文章于 2024-03-06 17:28:27 发布

_有光

最新推荐文章于 2024-03-06 17:28:27 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/youguang_/article/details/84326914

版权

本文介绍了一种使用JavaScript在网页上随机生成十六进制颜色的方法。通过创建一个函数，该函数可以生成一个随机的十六进制颜色字符串，并将其应用于HTML元素的背景颜色。这种方法可以用于动态地改变网页的外观，例如在每次页面加载时生成不同的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

=================随机产生十六进制所对应的颜色====================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #2288f6;
        }
    </style>
    <script>
        function getColor() { 
            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 num = parseInt(Math.random()*16);  //随机产生0-15之间的一个数
                str += arr[num];    //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起 
            }
            return str;
        }
         //页面记载的事件 
        window.onload = function () {
                  //在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色 
            document.getElementById("dv").style.backgroundColor = getColor();
        };
    </script>
</head>
<body>
    <div id="dv"></div>
</body>
</html>