Javascript 獲取隨機顏色的幾種方式
- 2020 年 4 月 14 日
- 筆記
先認識一下顏色值的表達方式
#FFFFFF,由6位16進位數組成。
#FFFFFFFF,由8位16進位數組成,前6位表示顏色,後兩位數表示透明度,數值越大,透明度越小。
rgb(255,255,255),由3位0-255之間的數字組成。
rgba(255,255,255,.5),最後一位0-1之間的小數,表示透明度,數值越大,透明度越小。
#FFFFFFFF,由8位16進位數組成,前6位表示顏色,後兩位數表示透明度,數值越大,透明度越小。
rgb(255,255,255),由3位0-255之間的數字組成。
rgba(255,255,255,.5),最後一位0-1之間的小數,表示透明度,數值越大,透明度越小。
隨機生成格式為#FFFFFF的顏色值
隨機生成6位0-15之間的數字,再用toString(16)將數字轉成16進位。
//隨機生成6位16進位數的顏色值 #FFFFFF
function randomColor() {
var color = “#”;
//for循環中,如果後面僅有一條語句,{}可省略不寫
//隨機生成6位0-15之間的數字,再用toString(16)將數字轉成16進位
for (var i = 0; i < 6; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
隨機生成帶透明度的16進位的顏色值
跟第一種方法類似,隨機生成8位0-15之間的數字,再用toString(16)將數字轉成16進位。
//#ff0000ff 後兩位是透明度,數值越大,顏色越深
function randomColor() {
var color = “#”;
//for循環中,如果後面僅有一條語句,{}可省略不寫
//同上面方法
for (var i = 0; i < 8; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
獲取生成RGB格式的隨機顏色值
隨機生成3位0-255之間的數字,字元串進行拼接。
//獲取隨機顏色 rgb(255,255,255)
function randomColor(){
var color=”rgb(“;
for(var i=0;i<3;i++) color+=parseInt(Math.random()*256)+”,”;
//去除最後一個逗號
// color=color.slice(0,-1)
color=color.substring(0,color.length-1)+”)”;
return color;
}
123456789
獲取生成RGBA格式的隨機顏色值
隨機生成3位0-255之間的數字,如果有傳入透明度的值,將按照用戶傳入的值來渲染。如果沒有傳入透明度的值,則隨機生成透明度。
需要注意的是Math.random()只能生成0-1之間的小數,不包含0跟1,Math.random()*10,是1-10之間的整數,除以10再四捨五入,就有可能得到0或者1。
function randomColor(alpha){
//判斷有沒有傳入透明值,沒有傳入的話,隨機生成0-1之間的小數
//Math.random()只能生成0-1之間的小數,不包含0跟1,Math.random()*10,是1-10之間的整數,除以10再四捨五入,就有可能得到0或者1.
alpha = alpha==undefined? (Math.random()*10/10).toFixed(1) : alpha;
//將參數轉化成數值
alpha=Number(alpha);
//如果傳入的參數是非數值,則讓透明度為1
if(isNaN(alpha)) alpha=1;
//顏色拼接
var color = “rgba(“;
for(var i=0;i<3;i++){
color+=parseInt(Math.random()*256)+”,”;
}
color+= alpha+”)”;
return color;
}
隨機生成6位0-15之間的數字,再用toString(16)將數字轉成16進位。
//隨機生成6位16進位數的顏色值 #FFFFFF
function randomColor() {
var color = “#”;
//for循環中,如果後面僅有一條語句,{}可省略不寫
//隨機生成6位0-15之間的數字,再用toString(16)將數字轉成16進位
for (var i = 0; i < 6; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
隨機生成帶透明度的16進位的顏色值
跟第一種方法類似,隨機生成8位0-15之間的數字,再用toString(16)將數字轉成16進位。
//#ff0000ff 後兩位是透明度,數值越大,顏色越深
function randomColor() {
var color = “#”;
//for循環中,如果後面僅有一條語句,{}可省略不寫
//同上面方法
for (var i = 0; i < 8; i++) color+=parseInt(Math.random() * 16).toString(16);
return color;
}
12345678
獲取生成RGB格式的隨機顏色值
隨機生成3位0-255之間的數字,字元串進行拼接。
//獲取隨機顏色 rgb(255,255,255)
function randomColor(){
var color=”rgb(“;
for(var i=0;i<3;i++) color+=parseInt(Math.random()*256)+”,”;
//去除最後一個逗號
// color=color.slice(0,-1)
color=color.substring(0,color.length-1)+”)”;
return color;
}
123456789
獲取生成RGBA格式的隨機顏色值
隨機生成3位0-255之間的數字,如果有傳入透明度的值,將按照用戶傳入的值來渲染。如果沒有傳入透明度的值,則隨機生成透明度。
需要注意的是Math.random()只能生成0-1之間的小數,不包含0跟1,Math.random()*10,是1-10之間的整數,除以10再四捨五入,就有可能得到0或者1。
function randomColor(alpha){
//判斷有沒有傳入透明值,沒有傳入的話,隨機生成0-1之間的小數
//Math.random()只能生成0-1之間的小數,不包含0跟1,Math.random()*10,是1-10之間的整數,除以10再四捨五入,就有可能得到0或者1.
alpha = alpha==undefined? (Math.random()*10/10).toFixed(1) : alpha;
//將參數轉化成數值
alpha=Number(alpha);
//如果傳入的參數是非數值,則讓透明度為1
if(isNaN(alpha)) alpha=1;
//顏色拼接
var color = “rgba(“;
for(var i=0;i<3;i++){
color+=parseInt(Math.random()*256)+”,”;
}
color+= alpha+”)”;
return color;
}