js实现DIV背景色随机

来源：互联网发布：excel数据分类编辑：程序博客网时间：2024/06/05 02:59
    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>RandomColor</title>        <style>            *{                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;                margin-left: 10px;            }            .main,.main ul{                overflow: hidden;            }            .main{                width: 440px;                margin:30px auto;            }            .main ul li{                float: left;            }        </style>    </head>    <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>    <script>        (function(){            //1、随机色的函数-rgb            function getRandomColor(){                var rgb='rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';                console.log(rgb);                return rgb;            }    //    获取按钮            var btn_one=document.querySelector("#btn-one");            var Divs=document.querySelectorAll(".bg_color");            btn_one.onclick=function(){                for(var i=0;i<Divs.length;i++){                    Divs[i].style.backgroundColor=getRandomColor();                }            };            //2、随机颜色#XXXXXX            var btn_two=document.querySelector("#btn-two");            var divsTwo=document.querySelectorAll(".bg_two");            var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];            function generateMixed(n) {                var res = "#";                var id;                for(var i = 0; i < n ; i ++) {                    id= Math.floor(Math.random()*16);                    res += chars[id];                }                console.log(id,res);                return res;            }            btn_two.onclick=function(){                for(var i=0;i<divsTwo.length;i++){                    divsTwo[i].style.backgroundColor=generateMixed(6);                }            };        })()    </script>    </html>
演示地址：https://liuyanzhao.com/demo/randomBg/index.html
本文地址：https://liuyanzhao.com/3574.html
转载请注明
阅读全文
0 0