js随机颜色生成

最新推荐文章于 2024-01-05 10:59:42 发布

kirsten_z

最新推荐文章于 2024-01-05 10:59:42 发布

阅读量351

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/kirsten_z/article/details/77251307

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

说明
随机生成不同颜色，可根据具体需求，综合使用

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>@yield('title')</title>
    <style>
        .div_box {
            width:200px;
            height:100px;
            text-align: center;
            padding-top:50;
            font-size:14px;
            background-color: #000;
        }
        .div_a {
            width:120px;
            height:40px;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="div_box" id="div_box">
        <a href="javascript:void(0)" onclick="change();" class="div_a">点击改变背景</a>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    function change() {
        var str = '#';
        var i = 0;
        for (i; i < 6; i++) {
            var randNum = parseInt(Math.random()*15);
            switch (randNum) {
                case 10:
                    randNum = 'A';
                    break;
                case 11:
                    randNum = 'B';
                    break;
                case 12:
                    randNum = 'C';
                    break;
                case 13:
                    randNum = 'D';
                    break;
                case 14:
                    randNum = 'E';
                    break;
                case 15:
                    randNum = 'F';
                    break;
            }
            str += randNum;
        }
        var div_box = window.document.getElementById('div_box');
        div_box.style.backgroundColor = str;
    }
    </script>
</body>
</html>