简单点:js 获取随机安全色

Author Avatar
MonsterX 2018年10月27日发布 | 02月01日最后更新
  • 在其它设备中阅读本文章

为了让网站更加花里胡哨,我们可能会用到获取随机颜色的功能。贴在这里仅供参考。

获取随机颜色 js 代码实现

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

获取随机安全色的思路

我们使用 16 进制来表示颜色,例如白色的#FFFFFF,黑色的#000000,Web 安全色主要由00336699CCFF组成,因此,颜色总数就是 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();

再叨叨点

如果你使用 php 语言,也可以直接用 php 输出随机数进而转换为随机颜色啊 hhhhh 。Like this:

style="color: rgb(<?php echo(rand(0, 255)); ?>, <?php echo(rand(0,255)); ?>, <?php echo(rand(0, 255)); ?>)"

随机颜色可以应用在比如网站的标签云、随机纯色图片背景等地方,最后简单贴上一个 Web 安全色的网站

本文链接:https://monsterx.cn/it/js-for-randomcolor.html
本站文章除特殊说明外全部由 MonsterX 原创发布,未经允许禁止以任何形式转载。
如果您发现以上内容含有任何引起不适/侵犯权利/违反法律的内容,请立即 联系站长 进行处理。

选择表情