Apprenez à utiliser Javascript pour obtenir un effet de nuage de tags aléatoire_avec des compétences en code_javascript

Un nuage de tags est un ensemble de tags associés et leurs poids correspondants. Un nuage de balises typique comprend 30 à 150 balises. Le poids affecte la taille de la police ou d’autres effets visuels utilisés. Pendant ce temps, les histogrammes ou les diagrammes circulaires sont le plus souvent utilisés pour représenter environ 12 poids différents. Par conséquent, les nuages ​​de tags peuvent représenter davantage de droits, même s’ils sont moins précis. De plus, les nuages ​​de tags sont souvent interactifs : les tags sont généralement des hyperliens qui permettent aux utilisateurs d'accéder à leur contenu.

Cela peut être grossièrement compris comme un ensemble de balises liées ou non pertinentes mélangées. La définition de différents styles pour chaque balise en fonction de différents niveaux d'importance ou d'autres dimensions met en évidence leurs différences.

Parlons brièvement du principe de mise en œuvre du tag cloud :
Une fois que vous avez compris ce qu'est un nuage de balises, il est simple à mettre en œuvre. En fait, il vous suffit de définir différents styles en fonction de l'importance différente de chaque balise.
Ici, nous utilisons des nombres aléatoires pour implémenter un nuage de tags simple, non basé sur certaines dimensions, de style purement aléatoire. Le nuage de balises ici est en fait un ensemble de balises, puis la couleur et la taille de la police sont définies de manière aléatoire. Bien sûr, la taille de la police a une limite maximale et minimale.
1. Nous configurons une fonction de nombre aléatoire et une fonction de couleur aléatoire, et utilisons ces deux fonctions pour définir le style de l'étiquette.
2. Nous parcourons toutes les balises, puis utilisons les nombres aléatoires et les couleurs aléatoires à l'étape 1 pour définir la taille de la police et la couleur de ces balises.

Voir l'effet comme suit :

Un simple nuage de tags suffit.

En fait, nous pouvons également définir le style sur le fichier de style, puis définir le style de la balise a en définissant la classe de la balise a, ce qui offre une plus grande flexibilité.

Si vous devez le définir en fonction de certaines dimensions, vous pouvez définir les attributs de cette dimension sur la balise a, puis définir le style en fonction de ces attributs.

Regardez le code ci-dessous :

Code 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";
  }
 }
}