天天看點

用原生JS寫16進制随機顔色

方法一

步驟構思:Math對象随機,轉16進制字元,截取六位字元

    var a = Math.random(); // 調用靜态對象方法抛出随機數a
    console.log(a);

    var b = a.toString(16); // 把a轉換為16進制的字元串
    console.log(b);  
    console.log(b.length); // 15
    /* 進制的問題,為什麼不是16(就像十進制為什麼隻有9而沒有10) */

    var c = b.substr(-6); // 截取字元串後六位
    console.log(c);


    var color = '#' + Math.random().toString(16).substr(-6); // 加上'#'串聯成一行代碼
    console.log(color);      

方法二

    var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    console.log(arr.length); // 16

    function getColor() {
        var str = '#';
        for (var i = 1; i <= 6; i++) {
            function getRandom(min, max) { // 調用靜态對象Math.random(包含大小值間取一個整數)
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            var num = arr[getRandom(0, arr.length - 1)]; // 把從數組中随機索引的一個字元串指派給變量
            /* 十六進制的長度為何要-1(就像十進制為什麼隻有9而沒有10),如果超出則報underfined */
            str += num;
        }
        return str; //周遊索引滿6個字元則傳回函數值
    }
    var color = getColor();

    console.log(color.toLowerCase()); // 把字元串轉為小寫輸出      
js