javascript如何設置DIV背景色為隨機色

本文轉載自查看原文 2016-06-18 15:48 8640 JAVASCRIPT/ Web/ PHP/ Bootstrap/ JQUERY/ Ajax

隨機色有兩種格式：

效果預覽：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

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

CSS

*{
            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;
        }

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS設置DIV背景色漸變 div 背景色設置_DIV背景顏色設置 CSS設置DIV背景色漸變顯示 CSS設置DIV背景色漸變顯示【轉】如何設置背景色透明 WebStrom背景色設置設置導航欄背景色為透明色的最有效做法 linux 的終端字體色和背景色的修改方法（一） linux 的終端字體色和背景色的修改方法（三）在YUV圖像上根據背景色實現OSD反色