Ajar anda cara menggunakan javascript untuk mencapai kesan awan tag rawak_dengan kemahiran code_javascript

Awan teg ialah satu set teg yang berkaitan dan beratnya yang sepadan. Awan teg biasa mempunyai 30 hingga 150 teg. Berat mempengaruhi saiz fon atau kesan visual lain yang digunakan. Sementara itu, histogram atau carta pai paling biasa digunakan untuk mewakili kira-kira 12 pemberat yang berbeza. Oleh itu, awan teg boleh mewakili lebih berat, walaupun kurang tepat. Selain itu, awan teg selalunya interaktif: teg biasanya hiperpautan yang membolehkan pengguna menelusuri kandungan mereka.

Ia boleh difahami secara kasar sebagai sekumpulan teg yang berkaitan atau tidak berkaitan yang dicampurkan bersama-sama Menetapkan gaya yang berbeza untuk setiap teg mengikut tahap kepentingan yang berbeza atau dimensi lain menyerlahkan perbezaan teg tersebut.

Mari bercakap secara ringkas tentang prinsip pelaksanaan awan teg:
Sebaik sahaja anda memahami apa itu awan teg, ia adalah mudah untuk dilaksanakan. Sebenarnya, anda hanya perlu menetapkan gaya yang berbeza mengikut kepentingan yang berbeza bagi setiap teg.
Di sini kami menggunakan nombor rawak untuk melaksanakan awan teg mudah, bukan berdasarkan dimensi tertentu, gaya rawak semata-mata. Awan teg di sini sebenarnya adalah sekumpulan teg, dan kemudian warna dan saiz fon ditetapkan secara rawak Sudah tentu, saiz fon mempunyai had maksimum dan minimum.
1. Kami menyediakan fungsi nombor rawak dan fungsi warna rawak, dan menggunakan kedua-dua fungsi ini untuk menetapkan gaya untuk label.
2. Kami mengulangi semua teg, dan kemudian menggunakan nombor rawak dan warna rawak dalam langkah 1 untuk menetapkan saiz fon dan warna teg ini.

Lihat kesannya seperti berikut:

Awan teg ringkas adalah semua yang anda perlukan.

Malah, kami juga boleh menetapkan gaya kepada fail gaya, dan kemudian menetapkan gaya teg dengan menetapkan kelas untuk teg, yang memberikan fleksibiliti yang lebih besar.

Jika anda perlu menetapkannya mengikut dimensi tertentu, anda boleh menetapkan atribut dimensi ini kepada teg, dan kemudian menetapkan gaya mengikut atribut ini.

Lihat kod di bawah:

kod html:

<div id="wrap">
 <a href="#">web标准学习</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>

window.onload=function(){
 var obox=document.getElementById("wrap");
 var obj=obox.getElementsByTagName("a");
 //随机方法
 function rand(num){
  return parseInt(Math.random()*num+1);
 }
 //随机颜色值
 function randomcolor(){
  var str=Math.ceil(Math.random()*16777215).toString(16);
  if(str.length<6){
   str="0"+str;
  }
  return str;
 }
 //循环
 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";
  }
 }
}