JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換
16進(jìn)制轉(zhuǎn) rgb
function hexToRgba(hex, opacity) { if (!hex) hex = '#ededed'; let rgba = 'rgba(' + parseInt('0x' + hex.slice(1,3)) + ',' + parseInt('0x' + hex.slice(3,5)) + ',' + parseInt('0x' + hex.slice(5,7)) + ',' + (opacity || "1") + ')' return rgba }
rgb 轉(zhuǎn) 16進(jìn)制
function RGBToHex(rgb) { if (!rgb) rgb = 'rgb(237,237,237)' var regexp = /[0-9]{0,3}/g var res = rgb.match(regexp) // 利用正則表達(dá)式去掉多余的部分,將rgb中的數(shù)字提取 var hexRes = '#' var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'] var hexArr = [] for (let i = 0; i < res.length; i++) { if (res[i]) { if (res[i] > 16) { let leftIndex = (res[i] / 16) >> 0 // 向下取整 let rightIndex = +res[i] % 16 hexArr.push(hex[leftIndex]) hexArr.push(hex[rightIndex]) } else { hexArr.push(0) hexArr.push(hex[res[i]]) } } } return hexRes += hexArr.join('') // #EDEDED }
補(bǔ)充:
JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換
1、16進(jìn)制轉(zhuǎn)rgba
16進(jìn)制顏色模版
轉(zhuǎn)換代碼
function hexToRgba(hex){ const rgba = []; hex = hex.replace('#', '').padEnd(8, 'F'); for (let i = 0; i < hex.length; i+=2) { rgba.push(parseInt(hex.slice(i, i+2), 16)) } return rgba; }
2、rgba轉(zhuǎn)16進(jìn)制
function rgbaToHex(rgba){ let hex = '#'; for (const i of rgba) { hex += i.toString(16).padStart(2, '0'); } return hex; }
到此這篇關(guān)于JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js 16進(jìn)制顏色與rgb顏色轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nuxt3?布局layouts和NuxtLayout的使用詳解
layouts是Nuxt3提供的一種方便開發(fā)者快速實(shí)現(xiàn)自定義布局的約定,是基于Vue3的一個(gè)開發(fā)框架,基于服務(wù)器端渲染SSR,可以更加方便的用于Vue的SEO優(yōu)化,這篇文章主要介紹了Nuxt3?布局layouts和NuxtLayout的使用,需要的朋友可以參考下2023-04-04非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼 附原理方法
這篇文章主要為大家詳細(xì)介紹了一個(gè)非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼,并附原理方法,感興趣的小伙伴們可以參考一下2016-06-06javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合,可以是javascript對(duì)string的功能更多2008-06-06JS當(dāng)前頁面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼
下面小編就為大家?guī)硪黄狫S當(dāng)前頁面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09js 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法
下面小編就為大家?guī)硪黄猨s 定義對(duì)象數(shù)組(結(jié)合)多維數(shù)組方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07