自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

淺析利用Javascript獲取隨機(jī)顏色

作者：司徒正美
開發(fā) 前端
這里我們將介紹如何利用Javascript獲取隨機(jī)顏色，希望本文能對大家日常的開發(fā)工作有所幫助。

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

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

實(shí)現(xiàn)1

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

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

實(shí)現(xiàn)2

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

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

實(shí)現(xiàn)3

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

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

實(shí)現(xiàn)4

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

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

  1. <!doctype html> 
  2. <meta charset="utf-8"/> 
  3. <meta http-equiv="X-UA-Compatible" content="IE=8"/> 
  4. <title>hex的***值</title> 
  5. <script type="text/javascript" charset="utf-8"> 
  6. window.onload = function () {  
  7. alert(parseInt("0xffffff",16).toString(10));  
  8. };  
  9. </script> 
  10. <div id="text"></div> 

運(yùn)行代碼

實(shí)現(xiàn)5

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

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

實(shí)現(xiàn)6

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

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

實(shí)現(xiàn)7

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

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

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

實(shí)現(xiàn)8

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

實(shí)戰(zhàn)一下：

  1. <!doctype html>  
  2. <html dir="ltr" lang="zh-CN">  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <meta http-equiv="X-UA-Compatible" content="IE=8">  
  6. <title>初級餅圖</title>  
  7. <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>  
  8. <script type="text/javascript" charset="utf-8">  
  9.  
  10. var getRandomColor = function(){  
  11. return "hsb(" + Math.random()  + ", 1, 1)";  
  12. }  
  13.  
  14. window.onload = function () {  
  15. var paper = Raphael("canvas", 700, 700);  
  16. paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//設(shè)置畫板  
  17.  
  18. function drawSector(cx,cy,r,paper,oc,startAngle){  
  19. var angleplus = 360 * oc / 100,//360度乘以40%  
  20. startAngle = startAngle || 0,  
  21. endAngle =startAngle+angleplus,  
  22. rad = Math.PI / 180,  
  23. x1 = cx + r * Math.cos(-startAngle * rad),  
  24. x2 = cx + r * Math.cos(-endAngle * rad),  
  25. y1 = cy + r * Math.sin(-startAngle * rad),  
  26. y2 = cy + r * Math.sin(-endAngle * rad);  
  27. var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"];  
  28. path = path.join(" ");  
  29. paper.path({fill:getRandomColor()},path);  
  30. return endAngle  
  31. }  
  32. var ocs = [40,25,17,10,8];  
  33. for(var i=0,l=ocs.length,startAngle;i<l;i++){  
  34. startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);  
  35. }  
  36.  
  37. };  
  38. </script>  
  39. <style type="text/css" media="screen">  
  40. #canvas {  
  41. width: 700px;  
  42. height: 700px;  
  43. }  
  44. </style>  
  45. <title>初級餅圖</title>  
  46. </head>  
  47. <body>  
  48. <p>初級餅圖</p>  
  49. <div id="canvas"></div>  
  50. </body>  
  51. </html> 

運(yùn)行代碼

原文標(biāo)題：javascript獲取隨機(jī)顏色

鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/09/24/1572977.html

【編輯推薦】

  1. JSON是什么？為JavaScript準(zhǔn)備的數(shù)據(jù)格式
  2. 十個(gè)最常用的JavaScript自定義函數(shù)
  3. 有關(guān)JavaScript事件加載的一些延伸思考
  4. JavaScript使用心得匯總：從BOM和DOM談起
  5. ExtJS在Android模擬器上的運(yùn)行效果
責(zé)任編輯：彭凡 來源： 博客園
Javascript獲取
相關(guān)推薦

2009-09-17 10:57:06

Linq隨機(jī)讀取數(shù)據(jù)

2010-09-28 14:12:50

Javascript

2011-03-10 14:19:56

JavaScript

2024-09-04 08:40:51

2009-07-14 11:34:42

MyEclipse斷點(diǎn)JavaScript

2021-07-27 22:56:00

JavaScript編程開發(fā)

2009-08-28 15:52:23

C#利用sharpzi

2009-07-10 10:04:28

MetaWeblog接

2011-06-16 11:23:42

光纖彎曲損耗

2011-05-23 11:19:26

2016-09-06 21:37:41

2016-10-19 14:35:20

JavaScript函數(shù)式編程

2010-09-30 15:19:33

2011-03-07 09:41:10

JavaScript

2021-02-07 22:59:55

JavaScript編程方法鏈

2009-07-24 17:30:37

Javascript閉

2009-07-31 09:00:44

ASP.NET生成隨機(jī)

2011-06-16 11:15:14

光纖微彎損耗

2011-03-08 09:15:04

JavaScript

2022-01-17 21:37:24

JavaScriptHTMLCSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號