如何實現隨機顏色 他們的效能如何

2021-10-01 07:41:14 字數 1336 閱讀 6559

這裡是修真院前端小課堂,每篇分享文從

【 如何實現隨機顏色 他們的效能如何】

今天給大家分享一下,修真院官網js任務一, 如何實現隨機顏色 他們的效能如何

1.背景介紹

相信大家都知道在前端的顏色表示方式有多種,一種是以3個或6個十六進製制的數子表示,一種是rgb的數字形式,還有一種是直接以顏色的英文來表示。這三種都是不支援透明色的。所以還有rgba的表式方式,在rgb的的基礎上加入了alpha透明,使網頁可以展現更加複雜絢麗的效果。

2.知識剖析

math.ceil(); //向上取整。

math.floor(); //向下取整。

math.round(); //四捨五入。

math.random(); ~ 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() /

// 顏色隨機2

/ function color()

///顏色隨機3 通過hsl

//hsl是hue色調,starution飽和度,lightness亮度,優點:瀏覽器適應度較高

/ function color()

///通過陣列隨機6位

/ function color())("");}*/

6.擴充套件思考

7、參考文獻

js產生隨機數函式 - 魚塘總裁 -

8、更多討論

1、問:[2,8]之間的隨機數如何實現

答: math.random()*6+2
2、問:以上幾種效能如何

前三種請求較少,

第四種陣列需要n次請求,不推薦

3、如何限定顏色範圍

將隨機顏色範圍指定,然後帶入隨機數中

python背景顏色怎麼隨機 如何使用隨機選擇顏色

如果不使用其他匯入,則相當簡單 turtle.colormode 255 sets the color mode to rgb r random.randrange 0,256,100 last value optional step b random.randrange 0,256 g rando...

JavaScript 如何實現陣列的隨機排序?

第一種方法。math.random 返回介於 0 包含 1 不包含 之間的乙個隨機數。這種方法是迴圈過程中通過math.random 函式產生的隨機值,在陣列中這個隨機值位置的數和arr i 位置的資料交換,迴圈結束,產生隨機數組。第二種方法。splice 方法用於插入 刪除或替換陣列的元素。注意 ...

如何改變Tab Control的顏色

蒐羅了一下,還沒有發現完整的描述資料,這裡簡單描述一下自己摸索的思路。要改變tab control的顏色,首先了解tab control的組成 tab頁頭,tab頁和背景。所以需要同時改變這三個部分顏色,才能達到目的。1 改變tab頁頭的顏色 這部分可參考msdn的資料,這裡不再重複。how to ...