javascript如何设置DIV背景色为随机色

我不是女神ヾ 2022-06-06 10:59 431阅读 0赞

*摘要：* javascript如何设置DIV背景色为随机色

随机色有两种格式：

效果预览：[http://wjf444128852.github.io/DEMOLIST/JS/test/index.html][http_wjf444128852.github.io_DEMOLIST_JS_test_index.html]

1、rgb(xxx,xxx,xxx)

2、\#xxxxxx

下面实现两种随机的方法

思路：

就是如何让x都是随机的，

1、中的xxx是0-255之间的随机整数，用Math.random()\*255取得0-255之间的随机数，

再Math.floor()保留小数点前面的

2、中的x是0123456789abxdef中的随机6个的组合，

这里可以用数组或者字符串处理，这里采用数组，

只要从数组里取6次，每次取得数组下标是0-16之间的随机整数即可。

注意(法二中虽然改变的是\#XXXX，此时浏览器查看DOM元素的background-color属性值还是rgb格式的，

但是JS中赋值是\#xxx格式。)

代码如下：

HTML

![复制代码][copycode.gif]

<body>
        <div class="main">
            <p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p>
            <ul>
                <li><div class="bg_color"></div></li>
                <li><div class="bg_color"></div></li>
                <li><div class="bg_color"></div></li>
                <li><div class="bg_color"></div></li>
            </ul>
        </div>
        <div class="main">
            <p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p>
            <ul>
                <li><div class="bg_two"></div></li>
                <li><div class="bg_two"></div></li>
                <li><div class="bg_two"></div></li>
                <li><div class="bg_two"></div></li>
            </ul>
        </div>
    </body>

![复制代码][copycode.gif]

CSS

![复制代码][copycode.gif]

*{
        
                box-sizing: border-box;
                list-style: none;
                border: none;
                padding: 0;
                margin: 0;
            }
            p{
        
                text-align: center;
                margin: 20px;
            }
            p a{
        
                font-size: 20px;
                font-weight: 300;
                color: #e4393c;
                text-decoration: none;
                padding: 6px 10px;
                border: 1px solid currentColor;
            }
            .bg_color,.bg_two{
        
                width: 100px;
                height: 100px;
                border: 1px solid #aa00aa;
            }
            .main,.main ul{
        
                overflow: hidden;
            }
            .main{
        
                width: 400px;
                margin:30px auto;
            }
            .main ul li{
        
                float: left;
            }

![复制代码][copycode.gif]

[http_wjf444128852.github.io_DEMOLIST_JS_test_index.html]: http://wjf444128852.github.io/DEMOLIST/JS/test/index.html?spm=5176.100239.blogcont231684.8.bpiULD
[copycode.gif]: /images/20220606/737a7d77e1fa4e9b854fdd61f9cd80ff.png