JS實現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
本文實例講述了JS實現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法。分享給大家供大家參考，具體如下：
當(dāng)我們在已知一個整數(shù)如（0~256x256x256x256 之間的顏色值），想獲得關(guān)于它的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：這里再為大家推薦幾款本站的相關(guān)在線工具：
在線RGB、HEX顏色代碼生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB顏色查詢對照表_顏色代碼表_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker
在線網(wǎng)頁調(diào)色板工具：
http://tools.jb51.net/color/color_picker
在線顏色選擇器工具/RGB顏色查詢對照表：
http://tools.jb51.net/color/colorpicker
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- javascript實現(xiàn)十六進(jìn)制顏色值（HEX）和RGB格式相互轉(zhuǎn)換
- RGB顏色值轉(zhuǎn)HTML十六進(jìn)制(HEX)代碼的JS函數(shù)
- 用js實現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼
- JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
- js 翻轉(zhuǎn)顏色實現(xiàn)代碼
- Javascript實現(xiàn)Web顏色值轉(zhuǎn)換
- Javascript實現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法
- JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化
- JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法
- js實現(xiàn)九宮格的隨機顏色跳轉(zhuǎn)
- javascript實現(xiàn)rgb顏色轉(zhuǎn)換成16進(jìn)制格式
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)的Select三級下拉菜單,涉及javascript動態(tài)創(chuàng)建下拉列表的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
JS 類型轉(zhuǎn)換常見方法小結(jié)，需要的朋友可以參考下。2010-05-05
微信小程序內(nèi)拖動圖片實現(xiàn)移動、放大、旋轉(zhuǎn)的方法
這篇文章主要介紹了微信小程序內(nèi)拖動圖片實現(xiàn)移動、放大、旋轉(zhuǎn)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
基于RequireJS和JQuery的模塊化編程——常見問題全面解析
下面小編就為大家?guī)硪黄赗equireJS和JQuery的模塊化編程——常見問題全面解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
本篇文章主要主要介紹了基于webpack2.x的vue2.x的多頁面站點 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要給大家總結(jié)介紹了關(guān)于javascript中的一些奇葩的日期換算方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
selenium 反爬蟲之跳過淘寶滑塊驗證功能的實現(xiàn)代碼
這篇文章主要介紹了selenium 反爬蟲之跳過淘寶滑塊驗證功能，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
下面小編就為大家?guī)硪黄猨s封裝成插件_Canvas統(tǒng)計圖插件編寫實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
兼容ie ff div 層 打開+關(guān)閉+ 拖動+遮罩+移動+動畫改變高寬
div層 打開+關(guān)閉+ 拖動+遮罩+移動+動畫改變高寬的實例js代碼2008-07-07
小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離
這篇文章主要為大家詳細(xì)介紹了小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06