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 這個數值的。
複製程式碼
複製程式碼
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饼图