JS生成随机的Web安全色

前言

今天本来打算学习下原生的ajax,后来写着写着就跑偏了,写到了我的偶像-许嵩,于是写了个小demo,当写到音乐的时候,每个色块颜色都一样,不好玩,于是我准备搞一个随机色,最终效果如图了

qq%e6%88%aa%e5%9b%be20160919154531

获取随机颜色

获取随机颜色就一行代码,摘自网络

function getRandomColor() {
    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); 
}

获取随机安全色

[原创]这里使用16进制来表示颜色,例如白色的#FFFFFF,黑色的#000000,Web安全色主要由00,33,66,99,CC,FF组成,因此,总的颜色总数就是6*6=216种,先产出所有可能的情况(216种),放于数组中,然后再生成一个1-216的随机数,最后使用array[random]的形式随机返回一个数组成员,就算成功了。下面贴出代码:

function getRandomSafeColor() {
    var base = ['00','33','66','99','CC','FF'];     //基础色代码
    var len = base.length;                          //基础色长度
    var bg = new Array();                           //返回的结果
    var random = Math.ceil(Math.random()*215+1);    //获取1-216之间的随机数
    var res;
    for(var r = 0; r < len; r++){  
        for(var g = 0; g < len; g++){  
            for(var b = 0; b < len; b++){   
                bg.push('#'+base[r].toString()+base[g].toString()+base[b].toString());
            }  
        };  
    };
    for(var i=0;i<bg.length;i++){
        res =  bg[random];
    }
    return res;
}

二者的应用也很简单,比如给某个元素设置背景色:

document.getElementById('btn-load').style.background = getRandomColor();
document.getElementById('btn-load').style.background = getRandomSafeColor();

结束语

随机颜色应用还挺广泛的,比如各类网站的标签云,最后放出一个Web安全色的网站,里面颜色很纯正,适合应用于各类设计

Web安全色

共有 2 条评论

  1. Mccree

    想问一下你的贴代码的插件是什么?

  2. mq_brandon

    学习了。

Top