網(wǎng)頁(yè)中顏色的使用方式有一下幾種
**1、顏色名稱(chēng) **，如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í)這種寫(xiě)法。
方法三
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)';
}