標(biāo)簽云是一套相關(guān)的標(biāo)簽以及與此相應(yīng)的權(quán)重。典型的標(biāo)簽云有30至150個標(biāo)簽。權(quán)重影響使用的字體大小或其他視覺效果。同時，直方圖或餅圖表是最常用的代表約12種不同的權(quán)數(shù)。因此，標(biāo)簽云彩能代表更多的權(quán)，盡管不那么準(zhǔn)確。此外，標(biāo)簽云通常是可以交互的：標(biāo)簽是典型的超鏈接，讓用戶可以仔細(xì)了解他們的內(nèi)容。

大概可以理解為一堆相關(guān)或者不相關(guān)的標(biāo)簽混到一塊，根據(jù)不同的重要程度，或者其他維度的不同來為每個標(biāo)簽設(shè)置不同的樣式已凸顯他們的不同，這樣的一堆標(biāo)簽在一起就是我們通常說的標(biāo)簽云了。

下面我們大概說一下標(biāo)簽云實(shí)現(xiàn)的原理：

明白了標(biāo)簽云是咋回事兒那么實(shí)現(xiàn)起來就簡單了，其實(shí)就是根據(jù)每個標(biāo)簽的不同的重要性設(shè)置不同的樣式就可以了。

這里我們使用隨機(jī)數(shù)實(shí)現(xiàn)一個簡單的標(biāo)簽云，不是根據(jù)某些維度來實(shí)現(xiàn)，純粹的隨機(jī)樣式。這邊標(biāo)簽云實(shí)際是一堆a(bǔ)標(biāo)簽，然后隨機(jī)設(shè)置顏色和字體大小，當(dāng)然字體大小有個最大最小限制的。

1、我們設(shè)置了一個取隨機(jī)數(shù)函數(shù)，和一個隨機(jī)顏色函數(shù)，通過這兩個函數(shù)為標(biāo)簽設(shè)置樣式。

2、我們把所有的a標(biāo)簽循環(huán)，然后利用步驟一里邊的隨機(jī)數(shù)，和隨機(jī)顏色設(shè)置這些標(biāo)簽的字體大小和顏色。

查看效果如下:

一個簡單的標(biāo)簽云就完事了。

其實(shí)我們還可以吧樣式設(shè)置到樣式文件，然后通過為a標(biāo)簽設(shè)置class來設(shè)置a標(biāo)簽的樣式，這樣靈活性更大。

如果需要根據(jù)某些維度來設(shè)置的話，那么可以給a標(biāo)簽設(shè)置好這種維度的屬性，然后根據(jù)這些屬性來設(shè)置樣式。

下面看代碼：

html代碼：

<div id="wrap">

 <a href="#">web標(biāo)準(zhǔn)學(xué)習(xí)</a>

 <a href="#">css</a>

 <a href="#">javascript</a>

 <a href="#">html5</a>

 <a href="#">canvas</a>

 <a href="#">video</a>

 <a href="#">audio</a>

 <a href="#">jQuery</a>

 <a href="#">jQuerymobile</a>

 <a href="#">flash</a>

 <a href="#">firefox</a>

 <a href="#">chrome</a>

 <a href="#">opera</a>

 <a href="#">IE9</a>

 <a href="#">css3.0</a>

 <a href="#">andriod</a>

 <a href="#">apple</a>

 <a href="#">google</a>

 <a href="#">jobs</a>

 </div>

javascript代碼：

window.onload=function(){

 var obox=document.getElementById("wrap");

 var obj=obox.getElementsByTagName("a");

 //隨機(jī)方法

 function rand(num){

  return parseInt(Math.random()*num+1);

 }

 //隨機(jī)顏色值

 function randomcolor(){

  var str=Math.ceil(Math.random()*16777215).toString(16);

  if(str.length<6){

   str="0"+str;

  }

  return str;

 }

 //循環(huán)

 for( len=obj.length,i=len;i--;){

  obj[i].className="color"+rand(5);

  obj[i].style.zIndex=rand(5);

  obj[i].style.fontSize=rand(12)+12+"px";

  // obj[i].style.background="#"+randomcolor();

  obj[i].style.color="#"+randomcolor();

  obj[i].onmouseover=function(){

   this.style.background="#"+randomcolor();

  }

  obj[i].onmouseout=function(){

   this.style.background="none";

  }

 }

}

以上這篇教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考