網(wǎng)頁(yè)中顏色的使用方式有一下幾種
**1、顏色名稱 **顽频，如red black white
2、十六進(jìn)制顏色太闺，網(wǎng)頁(yè)中常用糯景，每?jī)晌淮砑t綠藍(lán)的值的比例， 如 #ffffff白色 #000000黑色
3省骂、rgba顏色蟀淮， 如 rgba(255,255,255,0.5) 半透明白色 ，此方式ie8及以下不兼容
RGBA(R,G,B,A)
R：紅色值钞澳。正整數(shù) | 百分?jǐn)?shù)
G：綠色值怠惶。正整數(shù) | 百分?jǐn)?shù)
B：藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
A：Alpha透明度轧粟。取值0~1之間策治。
4、hsla顏色值兰吟， 如 hsla(360, 50%, 50%, .5) 半透明紅色 通惫， 此方式ie8及以下不兼容
HSLA(H,S,L,A)
H：Hue(色調(diào))。0(或360)表示紅色混蔼，120表示綠色履腋，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色惭嚣。取值為：0 - 360
S：Saturation(飽和度)遵湖。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度晚吞。取值0~1之間延旧。
那么怎么隨機(jī)一個(gè)顏色值呢？（建議掌握至少三種方法）
方法一（隨機(jī)RGB顏色值）#####
//顏色對(duì)象
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)';
}
方法二 （生成十六進(jìn)制的顏色值）
var getRandomColor = function(){
return '#' + (function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
隨機(jī)生成6個(gè)字符然后再串到一起载矿，閉包調(diào)用自身與三元運(yùn)算符讓程序變得內(nèi)斂垄潮，初心者應(yīng)該好好學(xué)習(xí)這種寫法。
方法三
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對(duì)象闷盔，用于生成hex顏色值的字符串提取出來(lái)弯洗，并利用第三個(gè)參數(shù)來(lái)判斷是否還繼續(xù)調(diào)用自身。
方法四
以下為引用的內(nèi)容：
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('');
}
這個(gè)要求我們對(duì)數(shù)組做些擴(kuò)展逢勾，map將返回一個(gè)數(shù)組牡整，然后我們?cè)儆胘oin把它的元素串成字符。
方法五
var getRandomColor = function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
這個(gè)實(shí)現(xiàn)非常逆天溺拱，雖然有點(diǎn)小bug逃贝。我們知道hex顏色值是從#000000到#ffffff谣辞，后面那六位數(shù)是16進(jìn)制數(shù)，相當(dāng)于“0x000000”到“0xffffff”沐扳。這實(shí)現(xiàn)的思路是將hex的最大值ffffff先轉(zhuǎn)換為10進(jìn)制泥从，進(jìn)行random后再轉(zhuǎn)換回16進(jìn)制。
方法六
var getRandomColor = function(){
return '#'+(Math.random()*0xffffff<<0).toString(16);
}
基本方法5的改進(jìn)沪摄，利用左移運(yùn)算符把0xffffff轉(zhuǎn)化為整型躯嫉。這樣就不用記16777215了。由于左移運(yùn)算符的優(yōu)先級(jí)比不上乘號(hào)杨拐，因此隨機(jī)后再左移祈餐，連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（無(wú)法生成純白色與hex位數(shù)不足問(wèn)題）哄陶。0x1000000相當(dāng)0xffffff+1帆阳，確保會(huì)抽選到0xffffff。在閉包里我們處理hex值不足5位的問(wèn)題屋吨，直接在未位補(bǔ)零鹦付。
方法八
var getRandomColor = function(){
return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
這次在前面補(bǔ)零毛雇，連遞歸檢測(cè)也省了还最。
方法九（隨機(jī)hsla顏色）
1）隨機(jī)一個(gè)0~360的顏色值范圍呈础，
2）拼裝hsla的顏色值字符串（后面的飽和度、亮度渊胸、透明度按自己需求給值即可）
//顏色對(duì)象
function Color(){
this.colorAngle = Math.floor(Math.random()*360);
this.color = 'hsla('+ this.colorAngle +',100%,50%,1)';
}