久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

js隨機(jī)顏色代碼的多種實(shí)現(xiàn)方式

 火騎士大大 2017-06-22

JS隨機(jī)顏色有很多地方要用到：比如大家看到很多標(biāo)簽連接都是五顏六色,。那就需要到這個(gè)了,。下面開始：      

方法思路總共有二,。一是準(zhǔn)備一組漂亮的候選顏色,，二是隨機(jī)生成顏色,。

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

復(fù)制代碼 代碼如下:

var getRandomColor = function(){   

  return  '#' +   
    (function(color){   
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])   
      && (color.length == 6) ?  color : arguments.callee(color);   
  })('');   
}

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

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

復(fù)制代碼 代碼如下:

var getRandomColor = function(){   

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

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

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

復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

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

  var scope = thisObj || window;
  var a = [];
  for ( var i=0, j=this.length; i < j; ++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('');
}


這個(gè)要求我們對(duì)數(shù)組做些擴(kuò)展,，map將返回一個(gè)數(shù)組，然后我們?cè)儆胘oin把它的元素串成字符,。

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

復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

var getRandomColor = function(){

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


這個(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ù)值的,。
復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

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


實(shí)現(xiàn)5
復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

var getRandomColor = function(){

  return '#'+(Math.random()*0xffffff<<0).toString(16);
}


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

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

復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

var getRandomColor = function(){

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


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

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

復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

var getRandomColor = function(){

  return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}


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

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

復(fù)制代碼 代碼如下:

以下為引用的內(nèi)容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>初級(jí)餅圖</title>
    <script src="http://bloghighlighter./files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      var getRandomColor = function(){
        return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
      }

window.onload = function () {
        var paper = Raphael("canvas", 700, 700);
        paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//設(shè)置畫板

function drawSector(cx,cy,r,paper,oc,startAngle){
          var angleplus = 360 * oc / 100,//360度乘以40%
          startAngle = startAngle || 0,
          endAngle =startAngle+angleplus,
          rad = Math.PI / 180,
          x1 = cx + r * Math.cos(-startAngle * rad),
          x2 = cx + r * Math.cos(-endAngle * rad),
          y1 = cy + r * Math.sin(-startAngle * rad),
          y2 = cy + r * Math.sin(-endAngle * rad);
          var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"],

          path = path.join(" ");
          paper.path({fill:getRandomColor()},path);
          return endAngle
        }
        var ocs = [40,25,17,10,8];
        for(var i=0,l=ocs.length,startAngle;i<l;i++){
          startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);
        }

};
    </script>
    <style type="text/css" media="screen">
      #canvas {
        width: 700px;
        height: 700px;
      }
    </style>
    <title>初級(jí)2324234餅圖</title>
  </head>
  <body>
    <p>初級(jí)23232餅圖</p>
    <div id="canvas"></div>
  </body>
</html>

如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣魃鐓^(qū),，廣大熱心網(wǎng)友會(huì)為你解答?。? 點(diǎn)擊進(jìn)入社區(qū)

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多