JavaScript中16進制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
更新時間:2024年01月31日 10:45:18 作者:瓜月半
這篇文章主要介紹了JavaScript中16進制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過示例代碼介紹了JS 顏色16進制、rgba相互轉(zhuǎn)換問題,感興趣的朋友一起看看吧
JavaScript中16進制顏色與rgb顏色互相轉(zhuǎn)換
16進制轉(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進制
function RGBToHex(rgb) {
if (!rgb) rgb = 'rgb(237,237,237)'
var regexp = /[0-9]{0,3}/g
var res = rgb.match(regexp) // 利用正則表達式去掉多余的部分,將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
}補充:
JS 顏色16進制、rgba相互轉(zhuǎn)換
1、16進制轉(zhuǎn)rgba
16進制顏色模版
轉(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進制
function rgbaToHex(rgba){
let hex = '#';
for (const i of rgba) {
hex += i.toString(16).padStart(2, '0');
}
return hex;
}到此這篇關(guān)于JavaScript中16進制顏色與rgb顏色互相轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js 16進制顏色與rgb顏色轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nuxt3?布局layouts和NuxtLayout的使用詳解
layouts是Nuxt3提供的一種方便開發(fā)者快速實現(xiàn)自定義布局的約定,是基于Vue3的一個開發(fā)框架,基于服務(wù)器端渲染SSR,可以更加方便的用于Vue的SEO優(yōu)化,這篇文章主要介紹了Nuxt3?布局layouts和NuxtLayout的使用,需要的朋友可以參考下2023-04-04
js 定義對象數(shù)組(結(jié)合)多維數(shù)組方法
下面小編就為大家?guī)硪黄猨s 定義對象數(shù)組(結(jié)合)多維數(shù)組方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07

