JS實現(xiàn)顏色的10進制轉化成rgba格式的方法

更新時間：2017年09月04日 11:44:16 作者：藍精靈依米

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

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

當我們在已知一個整數(shù)如（0~256x256x256x256 之間的顏色值），想獲得關于它的3原色加一個透明度時，即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：這里再為大家推薦幾款本站的相關在線工具：

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

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

在線網頁調色板工具：
http://tools.jb51.net/color/color_picker

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

更多關于JavaScript相關內容可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

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