js隨機顏色程式碼的多種實作方式_javascript技巧

JS隨機顏色有很多地方要用到：例如大家看到很多標籤連接都是五顏六色。那就需要到這個了。以下開始：      

方法思路總共有二。 一是準備一組漂亮的候選顏色，二是隨機產生顏色。

實作1

複製程式碼 程式碼如下:

var getRandom)

  return  '#'    
    (function(color){   
    return (color =  '0123456789abcrandf.Math      && (color .length == 6) ?  color : arguments.callee(color);   
  })('');   
}

隨機產生6個字元然後再串產生6個字元然後再串產生6個字元然後再串產生6個字元然後再串產生6個字元閉包呼叫自身與三元運算子讓程式變得內斂，初心者應該好好學習這種寫法。
實現2

複製程式碼 程式碼如下:

var getRandomor = function()   return (function(m,s,c){   
    return (c ? arguments.callee(m,s,c-1) : '#')       * 16)]   
  })(Math,'0123456789abcdef',5)   
}


把Math對象，用於產生hex顏色值的字串提取出來，並利用第三個參數來判斷是否還繼續呼叫自身。

實現3

複製程式碼

程式碼如下:以下為引用的內容：

Array.prototype.map = function(fn, thisObj) {

  var scope = thisObj || window;   var a = [];

  for ( var i=0, j=this.length; i     a.push( fn.call(scope, this[i], i, this));

  }
  return a;
};
var getRandomColor = function(){
  return '#' ' 0123456789abcdef'.split('').map(function(v,i,a){
    return i>5 ? null : a[Math.floor(Math.random()*16)] }).join( '');
}


這個要求我們對數組做些擴展，map將返回一個數組，然後我們再用join把它的元素串成字符。

實作4

複製程式碼

程式碼如下:以下為引用的內容：

var getRandomColor = function(){

  return '#' Math.floor(Math.random()*16777215).toString(16); }

這個實作非常逆天，雖然有點小bug。我們知道hex顏色值是從#000000到#ffffff，後面那六位數是16進位數，相當於「0x000000」到「0xffffff」。這實現的想法是將hex的最大值ffffff先轉換為10進制，進行random後再轉換回16進制。我們來看看，如何得到16777215 這個數值的。

複製程式碼

程式碼如下:以下為引用的內容：

實作5

複製程式碼

程式碼如下:以下為引用的內容：

var getRandomColor = function(){

  return '#' (Math.random()*0xffffff}

基本上實現4的改進，利用左移運算子把0xffffff轉換為整數。這樣就不用記16777215了。由於左移運算子的優先權比不上乘號，因此隨機後再左移，連Math.floor也不用了。

實作6

複製程式碼 程式碼如下:

以下為引用的內容：

var getRandomColor = function(){

  return '#' (function(h){
    return new Array(7-h.length).join("0") h
  })((Math.random()*0x1000000}

修正上面版本的bug（無法產生純白色與hex位數不足問題）。 0x1000000相當0xffffff 1，確保會抽選到0xffffff。在閉包裡我們處理hex值不足5位的問題，直接在未位補零。

實作7

複製程式碼 程式碼如下:

以下為引用的內容：

var getRandomColor = function(){

  return '#' ('00000' (Math.random()*0x1000000}

這>這樣次在前面補零，連遞歸檢測也省了。

實戰一下：

複製程式碼 程式碼如下:

以下为引用的内容：

 

   
   
   
   
   
   
 
 
   

初级23232饼图