JS實現隨機顏色的3種方法與顏色格式的轉化
隨機顏色和顏色格式是我們在開發中經常要用到的一個小功能，網上相關的資料也很多，想着有必要總結一下自己的經驗。所以這篇文章主要介紹了JS實現隨機顏色的3種方法與顏色格式的轉化,需要的朋友可以參考借鑒，下面來一起看看吧。
前言
相信大家都知道在前端的顏色表示方式有多種，一種是以3個或6個十六進制的數子表示，一種是RGB的數字形式，還有一種是直接以顏色的英文來表示。這三種都是不支持透明色的。所以還有RGBA的表式方式，在RGB的的基礎上加入了Alpha透明，使網頁可以展現更加復雜絢麗的效果。
隨機顏色
在平時的碼農日常中，經常會用到求隨機顏色的地方，下面是我總結的幾種簡單的實現隨機顏色的方式：
十六進制格式（#000000-#FFFFFF）
第一種是比較簡單的方法，這種方法是先隨機生成ffffff以內16進制數，然后判斷位數，少於6位的用while循環在前面加0，湊夠6位。
|
1
2
3
4
5
6
7
|
function
randomHexColor() {
//隨機生成十六進制顏色
var
hex = Math.floor(Math.random() * 16777216).toString(16);
//生成ffffff以內16進制數
while
(hex.length < 6) {
//while循環判斷hex位數，少於6位前面加0湊夠6位
hex =
'0'
+ hex;
}
return
'#'
+ hex;
//返回‘#'開頭16進制顏色
}
|
還有一種比較方便但是比較難懂的方法，需要用到位運算。
|
1
2
3
|
function
randomHexColor() {
//隨機生成十六進制顏色
return
'#'
+ (
'00000'
+ (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}
|
按執行順序可以分為以下六步：
- 先執行
Math.random()* 0x1000000，其中0x1000000=0xffffff+1，因為Math.random()取不到1，所以+1，這樣就會生成一個1-16777216(不包含)以內的浮點數。 - 然后執行<<0，這是取整運算，去掉后面的小數點。這時為一個16777216(不包含)以內的十進制數。
- 之后執行
.toString(16)，把十進制數轉化為六位以下16進制數。 - 再后執行'00000'+，這時因為之前生成的16進制數最少可能僅一位，在前面加上5個0。
- 最后執行
.substr(-6)，是去從-6開始的后面所有字符串，也就是最后6位數。 - 前面加上#並retuen。
RGB格式
|
1
2
3
4
5
6
|
function
randomRgbColor() {
//隨機生成RGB顏色
var
r = Math.floor(Math.random() * 256);
//隨機生成256以內r值
var
g = Math.floor(Math.random() * 256);
//隨機生成256以內g值
var
b = Math.floor(Math.random() * 256);
//隨機生成256以內b值
return
`rgb(${r},${g},${b})`;
//返回rgb(r,g,b)格式顏色
}
|
RGBA格式
|
1
2
3
4
5
6
7
|
function
randomRgbaColor() {
//隨機生成RGBA顏色
var
r = Math.floor(Math.random() * 256);
//隨機生成256以內r值
var
g = Math.floor(Math.random() * 256);
//隨機生成256以內g值
var
b = Math.floor(Math.random() * 256);
//隨機生成256以內b值
var
alpha = Math.random();
//隨機生成1以內a值
return
`rgb(${r},${g},${b},${alpha})`;
//返回rgba(r,g,b,a)格式顏色
}
|
顏色格式轉化
在編碼過程中，經常會遇到要將顏色格式相互轉化的問題,其中十六進制格式和RGB格式是可以相互轉化的，但是RGBA格式由於多了前兩者沒有的Alpha透明屬性，所以和前兩者轉化會丟失Alpha值，不建議進行轉化，下面是我的顏色轉化的方法：
十六進制轉為RGB
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function
hex2Rgb(hex) {
//十六進制轉為RGB
var
rgb = [];
// 定義rgb數組
if
(/^\
#[0-9A-F]{3}$/i.test(hex)) { //判斷傳入是否為#三位十六進制數
let sixHex =
'#'
;
hex.replace(/[0-9A-F]/ig,
function
(kw) {
sixHex += kw + kw;
//把三位16進制數轉化為六位
});
hex = sixHex;
//保存回hex
}
if
(/^
#[0-9A-F]{6}$/i.test(hex)) { //判斷傳入是否為#六位十六進制數
hex.replace(/[0-9A-F]{2}/ig,
function
(kw) {
rgb.push(eval(
'0x'
+ kw));
//十六進制轉化為十進制並存如數組
});
return
`rgb(${rgb.join(
','
)})`;
//輸出RGB格式顏色
}
else
{
console.log(`Input ${hex} is wrong!`);
return
'rgb(0,0,0)'
;
}
}
|
RGB轉為十六進制
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function
rgb2Hex(rgb) {
if
(/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) {
//test RGB
var
hex =
'#'
;
//定義十六進制顏色變量
rgb.replace(/\d{1,3}/g,
function
(kw) {
//提取rgb數字
kw = parseInt(kw).toString(16);
//轉為十六進制
kw = kw.length < 2 ? 0 + kw : kw;
//判斷位數，保證兩位
hex += kw;
//拼接
});
return
hex;
//返回十六進制
}
else
{
console.log(`Input ${rgb} is wrong!`);
return
'#000'
;
//輸入格式錯誤,返回#000
}
}
|
總結
以上就是這篇文文章的全部內容了，也是我在平時遇到的關於顏色處理方面的問題，大家有遇到什么奇怪的問題和更好的解決方法可以交流溝通一下。希望本文的內容對大家的學習或者工作能帶來一定的幫助。