前兩天工作之中遇到了個小問題,后台希望將色值傳遞的時候以十六位的形式傳遞,但是因為不同瀏覽器之間的差異性,導致傳遞的色值有時是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; }
代碼並不復雜,希望能夠給新手一點幫助,大家共同學習成長~
