日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
淺析利用Javascript獲取隨機顏色

本文將談到利用Javascript獲取隨機顏色，這里我們需要知道做Javascript獲取隨機顏色主要是在作圖時方便展示，希望大家能從本文獲得幫助。

十多年專業(yè)網(wǎng)站建設公司歷程，堅持以創(chuàng)新為先導的網(wǎng)站服務，服務超過數(shù)千家企業(yè)及個人，涉及網(wǎng)站設計、重慶APP開發(fā)、微信開發(fā)、平面設計、互聯(lián)網(wǎng)整合營銷等多個領域。在不同行業(yè)和領域給人們的工作和生活帶來美好變化。

在制作餅圖或標簽云時，我們通常需要很多顏色，方法有二。一是準備一組漂亮的候選顏色，二是隨機生成顏色。在數(shù)量很多或不明確時，我想后者就是唯一的出路了。谷歌了一下，整理如下，按由淺入深的順序排列。

實現(xiàn)1

 
 
 
    
  
  
  
  1. var getRandomColor = function(){    
    2. 
  
  
  
  2. return  '#' +      
    3. 
  
  
  
  3. (function(color){      
    4. 
  
  
  
  4. return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])        
    5. 
  
  
  
  5. && (color.length == 6) ?  color : arguments.callee(color);    
    6. 
  
  
  
  6. })('');   
    7. 
  
  
  
  7. } 
    8.

隨機生成6個字符然后再串到一起，閉包調(diào)用自身與三元運算符讓程序變得內(nèi)斂，初心者應該好好學習這種寫法。

實現(xiàn)2

 
 
 
    
  
  
  
  1. var getRandomColor = function(){    
    2. 
  
  
  
  2. return (function(m,s,c){    
    3. 
  
  
  
  3. return (c ? arguments.callee(m,s,c-1) : '#') +        
    4. 
  
  
  
  4. s[m.floor(m.random() * 16)]   
    5. 
  
  
  
  5. })(Math,'0123456789abcdef',5)   
    6. 
  
  
  
  6. } 
    7.

把Math對象，用于生成hex顏色值的字符串提取出來，并利用第三個參數(shù)來判斷是否還繼續(xù)調(diào)用自身。

實現(xiàn)3

 
 
 
    
  
  
  
  1. Array.prototype.map = function(fn, thisObj) {    
    2. 
  
  
  
  2. var scope = thisObj || window;   
    3. 
  
  
  
  3. var a = [];    
    4. 
  
  
  
  4. for ( var i=0, j=this.length; i < j; ++i ) {      
    5. 
  
  
  
  5. a.push(fn.call(scope, this[i], i, this));    
    6. 
  
  
  
  6. }    
    7. 
  
  
  
  7. return a;   
    8. 
  
  
  
  8. };   
    9. 
  
  
  
  9. var getRandomColor = function(){   
    10. 
  
  
  
  10. return '#'+'0123456789abcdef'.split('').map(function(v,i,a){       
    11. 
  
  
  
  11. return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');   
    12. 
  
  
  
  12. } 
    13.

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

實現(xiàn)4

 
 
 
    
  
  
  
  1. var getRandomColor = function(){    
    2. 
  
  
  
  2. return '#'+Math.floor(Math.random()*16777215).toString(16);   
    3. 
  
  
  
  3. } 
    4.

這個實現(xiàn)非常逆天，雖然有點小bug。我們知道hex顏色值是從#000000到#ffffff，后面那六位數(shù)是16進制數(shù)，相當于"0x000000"到"0xffffff"。這實現(xiàn)的思路是將hex的***值ffffff先轉換為10進制，進行random后再轉換回16進制。我們看一下，如何得到16777215 這個數(shù)值的。

 
 
 
    
  
  
  
  1. > 
    2. 
  
  
  
  2.  charset="utf-8"/> 
    3. 
  
  
  
  3.  http-equiv="X-UA-Compatible" content="IE=8"/> 
    4. 
  
  
  
  4. </font></strong>hex的***值<strong><font> 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  id="text">
 

運行代碼

實現(xiàn)5

 
 
 
    
  
  
  
  1. var getRandomColor = function(){    
    2. 
  
  
  
  2. return '#'+(Math.random()*0xffffff<<0).toString(16);   
    3. 
  
  
  
  3. } 
    4.

基本實現(xiàn)4的改進，利用左移運算符把0xffffff轉化為整型。這樣就不用記16777215了。由于左移運算符的優(yōu)先級比不上乘號，因此隨機后再左移，連Math.floor也不用了。

實現(xiàn)6

 
 
 
    
  
  
  
  1. var getRandomColor = function(){   
    2. 
  
  
  
  2. return '#'+(function(h){     
    3. 
  
  
  
  3. return new Array(7-h.length).join("0")+h   
    4. 
  
  
  
  4. })((Math.random()*0x1000000<<0).toString(16))   
    5. 
  
  
  
  5. } 
    6.

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

實現(xiàn)7

 
 
 
    
  
  
  
  1. var getRandomColor = function(){   
    2. 
  
  
  
  2. return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);   
    3. 
  
  
  
  3. } 
    4.

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

上面版本生成顏色的范圍算是大而全，但隨之而來的問題是顏色不好看，于是實現(xiàn)8搞出來了。它生成的顏色相當鮮艷。

實現(xiàn)8

 
 
 
    
  
  
  
  1. var getRandomColor = function(){      
    2. 
  
  
  
  2. return "hsb(" + Math.random()  + ", 1, 1)";   
    3. 
  
  
  
  3. } 
    4.

實戰(zhàn)一下：

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2. "ltr" lang="zh-CN">  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4. "utf-8"/>  
    5. 
  
  
  
  5. "X-UA-Compatible" content="IE=8">  
    6. 
  
  
  
  6. 初級餅圖  
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9. "text/css" media="screen">  
    10. 
  
  
  
  10. #canvas {  
    11. 
  
  
  
  11. width: 700px;  
    12. 
  
  
  
  12. height: 700px;  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14.   
    15. 
  
  
  
  15. 初級餅圖  
    16. 
  
  
  
  16.   
    17. 
  
  
  
  17.   
    18. 
  
  
  
  18. 初級餅圖
      
    19. 
  
  
  
  19. "canvas">
 
  •  
  •  

    • 運行代碼


    新聞名稱：淺析利用Javascript獲取隨機顏色
    網(wǎng)站路徑：http://m.5511xx.com/article/ccocisp.html