如何實現隨機顏色 他們的效能如何
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 如何實現隨機顏色 他們的效能如何】
大家好，我是IT修真院深圳分院第十一期學員，一枚正直純潔善良的WEB程式設計師。
今天給大家分享一下，修真院官網JS任務一， 如何實現隨機顏色 他們的效能如何
1.背景介紹
相信大家都知道在前端的顏色表示方式有多種，一種是以3個或6個十六進位制的數子表示，一種是RGB的數字形式，還有一種是直接以顏色的英文來表示。這三種都是不支援透明色的。所以還有RGBA的表式方式，在RGB的的基礎上加入了Alpha透明，使網頁可以展現更加複雜絢麗的效果。
2.知識剖析
Math.ceil(); //向上取整。
Math.floor(); //向下取整。
Math.round(); //四捨五入。
Math.random(); //0.0 ~ 1.0 之間的一個偽隨機數。【包含0不包含1】 //比如0.8647578968666494
Math.ceil(Math.random()*10); // 獲取從1到10的隨機整數 ，取0的概率極小。
Math.round(Math.random()); //可均衡獲取0到1的隨機整數
Math.floor(Math.random()*10); //可均衡獲取0到9的隨機整數。
Math.round(Math.random()*10); //基本均衡獲取0到10的隨機整數，其中獲取最小值0和最大值10的機率少一半。
因為結果在0~0.4 為0，0.5到1.4為1...8.5到9.4為9，9.5到9.9為10。所以頭尾的分佈區間只有其他數字的一半。
2.隨機顏色的幾種形式
1.HSL
2.RGB
3.16進位制
3.常見問題
如何隨機多個顏色
4.解決方案
/* 隨機顏色的函式 */
/* function color() {
return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
} */
// 顏色隨機2
/* function color(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var rgb = 'rgb('+r+','+g+','+b+')';
console.log(rgb);
return rgb;
}
*/
//顏色隨機3 通過hsl
//hsl是hue色調，starution飽和度，lightness亮度，優點：瀏覽器適應度較高
/* function color(){
var h = Math.floor(Math.random()*361);
var s = Math.floor(Math.random()*101)+"%";
var l = Math.floor(Math.random()*101)+"%";
var hsl = 'hsl('+h +','+ s +','+ l +')';
console.log(hsl);
return hsl;
}
*/
//通過陣列隨機6位
/* function color(){
return "#"+(function(color){
return(color+="0123456789abcdef"[Math.floor(Math.random()*16)])&&(color.length==6)?
color:arguments.callee(color);
})("");
}
*/
6.擴充套件思考
7、參考文獻
js產生隨機數函式 - 魚塘總裁 - 部落格園
8、更多討論
1、問：[2,8]之間的隨機數如何實現
答： Math.random()*6+2
2、問：以上幾種效能如何
前三種請求較少，
第四種陣列需要N次請求，不推薦
3、如何限定顏色範圍
將隨機顏色範圍指定，然後帶入隨機數中
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地