DIV CSS 佈局教程網

js生成隨機顏色
編輯:JavaScript基礎知識     
[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
(~~(Math.random()*(1<<24))).toString(16)

真正有趣的地方在於定義顏色部分:


~~(Math.random()*(1<<24))).toString(16)

天吶,上面的代碼是什麼意思?在JavaScript中,比特操作符並不是經常被使用,因此這裡可能會讓很多程序員感到很疑惑。


我們想達到的目的是活的一個十六進制格式的顏色例如白色對應的是FFFFFF,藍色對應的是0000FF,或者隨便一個顏色37f9ac。雖然我們人類喜歡十進制,但是我們的代碼常常會需要十六進制的東西。


我們首先要學會如何使用toString函數將一個十進制的數組轉換為一個十六進制整數。這個函數可以接受一個參數,如果參數缺省,默認為十進制,但是你完全可以使用別的數組:


(30).toString(); // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 十六進制
(30).toString(2); // "11110" 二進制
(30).toString(36); // "u" 36是允許的最大參數值

除此之外,你可以使用parseInt函數將十六進制數字轉換為十進制。


parseInt("30"); // "30"
parseInt("30", 10); // "30"
parseInt("1e", 16); // "30"
parseInt("11110", 2); // "30"
parseInt("u", 36); // "30"

因此,我們現在只需要一個位於0ffffff之間的十六進制數,由於:


parseInt("ffffff", 16) == 16777215

而這裡的16777215實際上是2^24-1


如果你對二進制數學熟悉的話,你可能會知道1<<24 == 16777216


再進一步,你每在1後面添加一個0,你就相當於多做了一次2的乘方:


1 // 1 == 2^0
100 // 4 == 2^2
10000 // 16 == 2^4
1000000000000000000000000 // 16777216 == 2^24

因此,在這裡我們可以知道Math.random()*(1<<24)表示一個位於016777216之間的數。


但是這裡並沒有結束,因為Math.random返回的是一個浮點數,但是我們只想要整數部分。我們的代碼中使用波浪號操作符來完成這件事。波浪操作符在JavaScript中被用來對一個變量進行取反。


但是我們在這裡並不關心取反,我們指向獲取整數部分。因此我們還可以知道兩次取反可以去掉一個浮點數的小數部分,因此~~的作用相當於parseInt


var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001 // ~~c = 3213
;

~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

當然,我們還有一種更加簡潔的方法,使用OR操作符:


~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

最終,我們獲得了一個位於016777216之間的隨機整數,也就是我們想要的隨機顏色。此時我們只需要使用toString(16)將它轉化為十六進制數即可。

 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved