腾讯分分彩独胆二期
智軟工作室主要是為寧波公司提供寧波網站建設,寧波網站制作,寧波做網站公司,寧波外貿網站建設公司,寧波網站優化等項目,以優質的服務,優惠的價格,深的客戶信賴。相信有你的加入我們的明天會更有動力!期待與你合作!
  • 寧波智軟設計工作室,打造寧波網站制作工作室頂級品牌
  • 智軟擁有專業的設計團隊
  • 多年網站建設團隊為你服務
  • 智軟期待與你合作
  • 我們的技能
  • 我們掌握的技能有:dreamweaver,flash,photoshop
  • 寧波高端網站建設服務公司
    2014已經悄然到來,在新的一年我們恭賀所有客戶事業蒸蒸日上,同事慶祝智軟設計工作室成立5周年,在5周年為眾多客戶提供了保質量的網站設計與網站制作。 我們在新的一年質量與服務將會更加進一步為更多的客戶帶來高端的網站設計與服務!期待與你合作
  • 企業網站制作建設原因與服務介紹

    智軟設計工作室多年為寧波企業網站制作建設服務一直以來我們以最優惠價格,最優質的質量,最突出的設計!得到了客戶的一致認可,我們的服務包括:寧波網站設計,寧波網站建設,寧波網站制作,寧波網站優化,寧波英文網站制作我們會以優質的服務,最低的價格來報答客戶!

  • 點擊鏈接網站優化推廣介紹

    點擊連接網站優化推廣-對企業的網站優化和網站推廣--對企業的重要性-點擊進行詳細了解

  • 2014開幕,寧波網站設計服務全面優惠.

    2014開幕,寧波智軟設計為寧波企業提供更加優秀的設計和實惠的價格

  • 鏈接到網站案例展示平臺
    智軟設計工作為寧波客戶網站設計案例展示平臺-案例均為定期更新,讓新老客戶更好的看到我們做的案例,點擊查看我們做的網站案例吧!
  • 我們寧波網絡公司提供網站一站式解決方案
    智軟(寧波網絡公司)幫你輕松解決網絡問題,網站一站式解決方案
你當前的位置:智軟工作室 > 營銷與網絡 >

js隨機顏色代碼

2009-09-26 20:00

     JS隨機顏色有很多地方要用到:比如大家看到很多標簽連接都是五顏六色。那就需要到這個了。下面開始:       

方法思路總共有二。一是準備一組漂亮的候選顏色,二是隨機生成顏色。

實現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.}

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

實現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顏色值的字符串提取出來,并利用第三個參數來判斷是否還繼續調用自身。

實現3

以下為引用的內容:

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

02.  var scope = thisObj || window;
03.  var a = [];
04.  for ( var i=0, j=this.length; i < j; ++i ) {
05.    a.push(fn.call(scope, this[i], i, this));
06.  }
07.  return a;
08.};
09.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.}

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

實現4

以下為引用的內容:

1.var getRandomColor = function(){

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

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

以下為引用的內容:

<!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>

實現5

以下為引用的內容:

1.var getRandomColor = function(){

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

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

實現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位數不足問題)。0x1000000相當0xffffff+1,確保會抽選到0xffffff。在閉包里我們處理hex值不足5位的問題,直接在未位補零。

實現7

以下為引用的內容:

1.var getRandomColor = function(){

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

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

實戰一下:

以下為引用的內容:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>初級餅圖</title>
    <script src="http://bloghighlighter.googlecode.com/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"});//設置畫板

        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>初級2324234餅圖</title>
  </head>
  <body>
    <p>初級23232餅圖</p>
    <div id="canvas"></div>
  </body>
</html>

 

OK。。。完整的文章寫完。。

更多

【責任編輯:小戴工程師】

關鍵字: 代碼 隨機顏色 js

上一篇:seo之粘性內容的特性 下一篇:網站導航設計應該要注意哪些?

最新文章

2009-09-26 20:00

相關文章

2009-09-26 20:00
網站制作咨詢:
QQ:277728291
電話:18668277799
郵箱:[email protected]
期待你來電咨詢
回頂部
Copyright 2010 智軟工作室 版權所有    智軟為寧波公司提供最優惠的網絡服務【寧波網站建設,寧波網站制作公司,寧波做網站公司,寧波外貿網站建設公司】我們竭誠為你服務!
腾讯分分彩独胆二期 趣头条赚钱电脑版登入 赛车pk10下载 学生零成本怎么在手机上赚钱 ag技巧 北京快乐8开奖号 竟彩2串1稳赚不赔技巧 百宝面膜价格 泳坛夺金从几点开始 老时时骗局 ag电子竞技俱乐部 组选奖号401前后关系 幸运飞艇6码怎么倍投 体彩快乐扑克 龙虎相斗惊天地 重庆时时app下载新版 国际飞镖比赛规则