快捷導(dǎo)航

JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法

更新時(shí)間：2017年09月04日 11:44:16 作者：藍(lán)精靈依米

這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法。分享給大家供大家參考，具體如下：

當(dāng)我們?cè)谝阎粋€(gè)整數(shù)如（0~256x256x256x256 之間的顏色值），想獲得關(guān)于它的3原色加一個(gè)透明度時(shí)，即alpha, red, green, blue，可采用如下方法：

方法一：

function getColor(number) {
  let color = number;
  const blue = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const green = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const red = parseInt(color % 0x100, 10);
  const alpha = (parseInt(color >>> 8, 10) / 0xFF).toFixed(1);
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

方法二：

function getColor(number) {
  const alpha = number >> 24 & 0xff;
  const red = number >> 16 & 0xff;
  const green = number >> 8 & 0xff;
  const blue = number & 0xff;
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

PS：這里再為大家推薦幾款本站的相關(guān)在線工具：

在線RGB、HEX顏色代碼生成器：
http://tools.jb51.net/color/rgb_color_generator

RGB顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker

在線網(wǎng)頁調(diào)色板工具：
http://tools.jb51.net/color/color_picker

在線顏色選擇器工具/RGB顏色查詢對(duì)照表：
http://tools.jb51.net/color/colorpicker

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談JS的原型和繼承
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JavaScript圖片url地址轉(zhuǎn)base64簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于JavaScript圖片url地址轉(zhuǎn)base64的相關(guān)資料,圖片URL轉(zhuǎn)Base64是把圖片URL轉(zhuǎn)化為一個(gè)以base64編碼的字符串格式,使得圖片可以直接在HTML或CSS中使用,需要的朋友可以參考下
2023-10-10
Axios取消重復(fù)請(qǐng)求的方法實(shí)例詳解
在開發(fā)中,經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問題,這篇文章主要給大家介紹了關(guān)于Axios取消重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下
2021-06-06
JS中操作JSON總結(jié)
本篇文章主要是對(duì)JS操作JSON進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
微信小程序自定義toast的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序自定義toast的實(shí)現(xiàn)代碼,本文以toast為例通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
JS實(shí)現(xiàn)帶緩沖效果打開、關(guān)閉、移動(dòng)一個(gè)層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)帶緩沖效果打開、關(guān)閉、移動(dòng)一個(gè)層的方法,涉及javascript鼠標(biāo)事件及頁面元素操作技巧,需要的朋友可以參考下
2015-05-05
淺析java線程中斷的辦法
這篇文章給大家分享了java線程中斷的辦法以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。
2018-07-07
JS控制FileUpload的上傳文件類型實(shí)例代碼
下面小編就為大家?guī)硪黄狫S控制FileUpload的上傳文件類型實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
JS判斷鼠標(biāo)從什么方向進(jìn)入一個(gè)容器實(shí)例說明
偶然將想到的一個(gè)如何判斷鼠標(biāo)從哪個(gè)方向進(jìn)入一個(gè)容器的問題,并且做了一系列的設(shè)想，代碼部分不是很多，我直接寫了個(gè)示例，感興趣的朋友可以了解下，或許本文對(duì)你有所幫助
2013-02-02
uniapp組件uni-popup彈出層的使用
彈出層組件用于彈出一個(gè)覆蓋到頁面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03