js随机颜色的生成方法

网页中颜色的使用方式有一下几种
**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)';
  }