首頁 > web前端 > js教程 > js隨機顏色程式碼的多種實作方式_javascript技巧

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

WBOY
發布: 2016-05-16 17:35:45
原創
1296 人瀏覽過

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 這個數值的。



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

hex的最大





實作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}


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

實戰一下:

複製程式碼 程式碼如下:

以下为引用的内容:



 
   
    初级饼图
   
   
   
    初级2324234饼图
 


 
   

初级23232饼图


   

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板