随机一个十六进制颜色

最新推荐文章于 2024-02-19 15:01:37 发布

deliefu3790

最新推荐文章于 2024-02-19 15:01:37 发布

阅读量165

点赞数

原文链接：http://www.cnblogs.com/sandraryan/p/11610085.html

版权

<!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>