利用JS進行rgb與16位色值之間的轉換


前兩天工作之中遇到了個小問題,后台希望將色值傳遞的時候以十六位的形式傳遞,但是因為不同瀏覽器之間的差異性,導致傳遞的色值有時是rgb形式的,因此在參考了網上的代碼之后改了一個方法用以轉換。

首先是轉換的思路,rgb是以三原色進行表述的,將其中的三個數字分別轉換為兩位16進制的數字后相拼接,之后在前面加上#便成為了16位的表述方法。

如何提取三原色中的三個數字,方法不止一種,我采用的是以match進行全局查找,通過正則獲取連續的數字。

而10進制與16進制的轉換則是利用了數組查詢的方式,先將10進制的數字與16相除,將商與余數分別進行數組查詢,然后進行拼接。

具體的代碼如下:

function RGBToHex(rgb){ 
   var regexp = /[0-9]{0,3}/g;  
   var re = rgb.match(regexp);//利用正則表達式去掉多余的部分,將rgb中的數字提取
   var hexColor = "#"; var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];  
   for (var i = 0; i < re.length; i++) {
        var r = null, c = re[i], l = c; 
        var hexAr = [];
        while (c > 16){  
              r = c % 16;  
              c = (c / 16) >> 0; 
              hexAr.push(hex[r]);  
         } hexAr.push(hex[c]);
         if(l < 16&&l != ""){        
             hexAr.push(0)
         }
       hexColor += hexAr.reverse().join(''); 
    }  
   //alert(hexColor)  
   return hexColor;  
} 

代碼並不復雜,希望能夠給新手一點幫助,大家共同學習成長~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM