首页 孤独与我正文

js随机颜色的生成方法

夏雨 孤独与我 2019-09-29 938 0 | 文章出自:简书 JS随机颜色
限时免费加入本站QQ群994819852

js随机颜色的生成方法 JS 随机颜色 第1张

网页中颜色的使用方式有一下几种
**1、颜色名称 **,如red black white
2、十六进制颜色,网页中常用,每两位代表红绿蓝的值的比例, 如 #ffffff白色 #000000黑色
3、rgba颜色, 如 rgba(255,255,255,0.5) 半透明白色 ,此方式ie8及以下不兼容
RGBA(R,G,B,A)
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
4、hsla颜色值, 如 hsla(360, 50%, 50%, .5) 半透明红色 , 此方式ie8及以下不兼容
HSLA(H,S,L,A)
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。

那么怎么随机一个颜色值呢?(建议掌握至少三种方法)

方法一(随机RGB颜色值)#####

//颜色对象
  function Color(){
     this.r = Math.floor(Math.random()*255);
     this.g = Math.floor(Math.random()*255);
     this.b = Math.floor(Math.random()*255);
     this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
  }

方法二 (生成十六进制的颜色值)

var getRandomColor = function(){    
    return  '#' + (function(color){    
         return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
         && (color.length == 6) ?  color : arguments.callee(color);    
    })('');    
 }

随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛,初心者应该好好学习这种写法。

方法三

var getRandomColor = function(){    
    return (function(m,s,c){    
         return (c ? arguments.callee(m,s,c-1) : '#') +
         s[m.floor(m.random() * 16)]    
    })(Math,'0123456789abcdef',5)    }

把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。

方法四

以下为引用的内容:
Array.prototype.map = function(fn, thisObj) {      
var scope = thisObj || window;       
var a = [];       
for ( var i=0, j=this.length; i < j; ++i ) {         
a.push(fn.call(scope, this[i], i, this));       
}       return a; };
 var getRandomColor = function(){      
 return '#'+'0123456789abcdef'.split('').map(function(v,i,a){      
 return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''); }

这个要求我们对数组做些扩展,map将返回一个数组,然后我们再用join把它的元素串成字符。

方法五

var getRandomColor = function(){
  return '#'+Math.floor(Math.random()*16777215).toString(16); }

这个实现非常逆天,虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff,后面那六位数是16进制数,相当于“0x000000”到“0xffffff”。这实现的思路是将hex的最大值ffffff先转换为10进制,进行random后再转换回16进制。

方法六

var getRandomColor = function(){
    return '#'+(Math.random()*0xffffff<<0).toString(16); }

基本方法5的改进,利用左移运算符把0xffffff转化为整型。这样就不用记16777215了。由于左移运算符的优先级比不上乘号,因此随机后再左移,连Math.floor也不用了。

方法七#####

function  color2(){
       return "#" + function(color){
             return new Array( 7 - color.length).join("0") + color       }(( Math.random() * 0*1000000  << 0 ).toString(16));}
 // console.log(color2())

修正上面版本的bug(无法生成纯白色与hex位数不足问题)。0x1000000相当0xffffff+1,确保会抽选到0xffffff。在闭包里我们处理hex值不足5位的问题,直接在未位补零。

方法八

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

这次在前面补零,连递归检测也省了。

方法九(随机hsla颜色)

1)随机一个0~360的颜色值范围,
2)拼装hsla的颜色值字符串(后面的饱和度、亮度、透明度按自己需求给值即可)

//颜色对象
  function Color(){
    this.colorAngle = Math.floor(Math.random()*360);
    this.color = 'hsla('+ this.colorAngle +',100%,50%,1)';
  }

本页链接:https://www.xiayu.wang/gdyw/jssjysdscff.html

文章标题:js随机颜色的生成方法

版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。

评论

最新留言

  • 刘金洪

    刘金洪 说:

    10241024

    2020-04-03 12:59:57
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 不能收款

    不能收款 说:

    666666

    2020-04-03 12:54:21
    来源:福利帖:查车牌常用的网站
  • 好

    好 说:

    好啊

    2020-04-03 06:57:51
    来源:福利帖:查车牌常用的网站
  • rrrgggsss

    rrrgggsss 说:

    感谢感谢感谢

    2020-04-03 01:13:10
    来源:福利帖:查车牌常用的网站
  • 夏雨

    夏雨 说:

    生活像一把无情的刀,改变了我们模样。

    2020-04-03 00:20:49
    来源:给我留言
  • 晋鹏

    晋鹏 说:

    好东西一定要分享

    2020-04-02 20:15:21
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 1234668

    1234668 说:

    看隱藏

    2020-04-01 23:38:22
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 呵呵

    呵呵 说:

    好啊

    2020-04-01 16:24:04
    来源:福利帖:查车牌常用的网站