随机一个十六进制颜色

Posted 颜汐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了随机一个十六进制颜色相关的知识，希望对你有一定的参考价值。

<!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>
        div {
            width: 300px;
            height: 200px;
            box-shadow: 0 0 5px lightblue;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div>this is div</div>
    <script>
        var div = document.querySelector(\'div\');
        // console.log(div);
        // 封装函数
        function getColor() {
            //#号
            var str = \'#\';
            // 0-e的数组
            var arr = [\'0\', \'1\', \'2\', \'3\', \'4\', \'5\', \'6\', \'7\', \'8\', \'9\', \'a\', \'b\', \'c\', \'d\', \'e\', \'f\'];
            //    循环6次
            for (var i = 0; i < 6; i++) {
                //    随机这16位中的数字字母
                var num = parseInt(Math.random() * 16);
                //    把每一项添加给str
                arr[num];
                str += arr[num];
            }
            return str;
        }
        //    console.log(getColor());
        // 文档注册点击事件， 点击随机div颜色
        document.onclick = function () {
            div.style.backgroundColor = getColor();
            div.style.color = getColor();
        }
    </script>
</body>

</html>

文章地址  https://www.cnblogs.com/sandraryan/

以上是关于随机一个十六进制颜色的主要内容，如果未能解决你的问题，请参考以下文章

原生JS代码实现随机产生一个16进制的颜色值

iOS 随机颜色和十六进制颜色转换

生成随机种子十六进制颜色？

原生JS代码封装（获取一个16进制的随机颜色）

如何创建代表颜色的随机十六进制字符串？

JS一行代码，生成一个随机颜色，简单粗暴。