javascript實(shí)現(xiàn)十六進(jìn)制顏色值(HEX)和RGB格式相互轉(zhuǎn)換
在日常開(kāi)發(fā)中,經(jīng)常會(huì)用到不同格式的顏色域值之間的相互轉(zhuǎn)換,以下給出一種解決方法。
//十六進(jìn)制顏色值的正則表達(dá)式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*RGB顏色轉(zhuǎn)換為16進(jìn)制*/
String.prototype.colorHex = function(){
var that = this;
if(/^(rgb|RGB)/.test(that)){
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
var strHex = "#";
for(var i=0; i<aColor.length; i++){
var hex = Number(aColor).toString(16);
if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if(strHex.length !== 7){
strHex = that;
}
return strHex;
}else if(reg.test(that)){
var aNum = that.replace(/#/,"").split("");
if(aNum.length === 6){
return that;
}else if(aNum.length === 3){
var numHex = "#";
for(var i=0; i<aNum.length; i+=1){
numHex += (aNum+aNum);
}
return numHex;
}
}else{
return that;
}};
/*16進(jìn)制顏色轉(zhuǎn)為RGB格式*/
String.prototype.colorRgb = function(){
var sColor = this.toLowerCase();
if(sColor && reg.test(sColor)){
if(sColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
}
//處理六位的顏色值
var sColorChange = [];
for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return "RGB(" + sColorChange.join(",") + ")";
}else{
return sColor;
}};
使用顏色轉(zhuǎn)換方法:
ar sRgb = "RGB(23, 245, 56)" , sHex = "#34538b";
var sHexColor = sRgb.colorHex();
var sRgbColor = sHex.colorRgb();
- 使用JavaScript進(jìn)行進(jìn)制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進(jìn)制
- JS中的進(jìn)制轉(zhuǎn)換以及作用
- javascript parseInt() 函數(shù)的進(jìn)制轉(zhuǎn)換注意細(xì)節(jié)
- Javascript實(shí)現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法
- javascript簡(jiǎn)單進(jìn)制轉(zhuǎn)換實(shí)現(xiàn)方法
- javascript中簡(jiǎn)單的進(jìn)制轉(zhuǎn)換代碼實(shí)例
- javascript常見(jiàn)數(shù)字進(jìn)制轉(zhuǎn)換實(shí)例分析
- Javascript進(jìn)制轉(zhuǎn)換實(shí)例分析
- JS實(shí)現(xiàn)的進(jìn)制轉(zhuǎn)換,浮點(diǎn)數(shù)相加,數(shù)字判斷操作示例
- JS中字符問(wèn)題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)
- javascript實(shí)現(xiàn)的字符串與十六進(jìn)制表示字符串相互轉(zhuǎn)換方法
- JavaScript進(jìn)制轉(zhuǎn)換實(shí)現(xiàn)方法解析
相關(guān)文章
弱類型語(yǔ)言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語(yǔ)言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a,b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法
下面小編就為大家?guī)?lái)一篇js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案,使用jqthumb.js,感興趣的小伙伴們可以參考一下2016-07-07
JavaScript中“過(guò)于”犀利地for/in循環(huán)使用示例
Java中的增強(qiáng)for循環(huán)很是好用,但是JavaScript中為我們提供的for/in循環(huán)已然不是這么簡(jiǎn)單了,下面有個(gè)簡(jiǎn)單的示例,大家不妨參考下2013-10-10
javascript 獲取模態(tài)窗口的滾動(dòng)位置代碼
模態(tài)窗口的滾動(dòng)位置獲取辦法還有不知道的嗎?下面的方法或許對(duì)大家有所幫助,感興趣的朋友可以了解下,希望對(duì)大家有所幫助2013-08-08
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來(lái)介紹下它稍微高級(jí)點(diǎn)的用法。對(duì)bootstrap表格組件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-05-05
async/await實(shí)現(xiàn)Promise.acll()簡(jiǎn)介
Promise.all() 方法接收一個(gè) promise 的 iterable 類型的輸入,并且只返回一個(gè)Promise實(shí)例,并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個(gè)數(shù)組,這篇文章主要介紹了async/await實(shí)現(xiàn)Promise.acll()簡(jiǎn)介,需要的朋友可以參考下2022-11-11

