欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

十六進(jìn)制顏色值轉(zhuǎn)rgb
Javascript顏色轉(zhuǎn)換的核心就是進(jìn)制間的轉(zhuǎn)換。RGB格式其實(shí)就是十進(jìn)制表示法，所以，十六進(jìn)制顏色與RGB顏色的轉(zhuǎn)換就是十六進(jìn)制與十進(jìn)制之間的轉(zhuǎn)換。

十六進(jìn)制轉(zhuǎn)換為十進(jìn)制相對(duì)容易些，核心代碼如下示例：parseInt("0xFF")，其結(jié)果就是255，”0x”就表明當(dāng)前是16進(jìn)制，由于parseInt后面無(wú)參數(shù)，默認(rèn)就是轉(zhuǎn)換為10進(jìn)制了。

十進(jìn)制轉(zhuǎn)換為16進(jìn)制，核心代碼如下：var num=255; num.toString(16);，其結(jié)果是FF。”16″表示數(shù)值轉(zhuǎn)換為16進(jìn)制字符串。

function colorRgba(str,n){
	//十六進(jìn)制顏色值的正則表達(dá)式
	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	var sColor = str.toLowerCase();
	n= n||1;
	//十六進(jìn)制顏色轉(zhuǎn)換為RGB格式
    if(sColor && reg.test(sColor)){
        let sColorChange=getRgbNum(sColor);
		return "rgba(" + sColorChange.join(",") + ","+n+")";
    }else{
        return sColor;
    }}function getRgbNum(sColor){
	if(sColor.length === 4){
       var sColorNew = "#";
       for(var i=1; i<4; i+=1){  //補(bǔ)全顏色值 例如：#eee,#fff等
           sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
       }
       sColor = sColorNew;
    }
    //處理六位顏色值
    var sColorChange = [];
    for(var i=1; i<7; i+=2){
    //核心代碼，通過(guò)parseInt將十六進(jìn)制轉(zhuǎn)為十進(jìn)制，parseInt只有一個(gè)參數(shù)時(shí)是默認(rèn)轉(zhuǎn)為十進(jìn)制的，第二個(gè)參數(shù)則是指定轉(zhuǎn)為對(duì)應(yīng)進(jìn)制
      sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
    }
    return sColorChange;}1234567891011121314151617181920212223242526272829

顏色加深或者顏色減淡
原理是通過(guò)對(duì)rgb數(shù)字進(jìn)行加減來(lái)實(shí)現(xiàn)，因?yàn)閞gb的r、g、b三個(gè)數(shù)的值越大，顏色越淺，最大為255，此時(shí)為白色，值越小，顏色越深，最小值為0，此時(shí)為黑色，所以若是顏色值為rgb可以直接加減，若為十六進(jìn)制顏色值，則先轉(zhuǎn)為rgb,再加減

function LightDarkenColor(color, num) {
   let colorArr = getRgbNum(color);
   let sColorChange = [];
   for(var i=0;i<colorArr.length;i++){
   		let  val = colorArr[i]+num;
	    if(val<0){
	       val = 0;
	    }
	    if(val>255){
	    	val=255;
	    }
   		sColorChange.push(val)
   }
   return "rgba(" + sColorChange.join(",") + ",1)";}123456789101112131415

事實(shí)上colorRgba方法也具有顏色減淡功能，通過(guò)傳遞第二個(gè)參數(shù)（透明度）來(lái)側(cè)面實(shí)現(xiàn)顏色減淡效果。但不具備顏色加深效果。