Bringen Sie Ihnen bei, wie Sie Javascript verwenden, um einen zufälligen Tag-Cloud-Effekt zu erzielen_mit Code_Javascript-Kenntnissen-js-Tutorial-php.cn

Bringen Sie Ihnen bei, wie Sie Javascript verwenden, um einen zufälligen Tag-Cloud-Effekt zu erzielen_mit Code_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:10:31

Original

1715 Leute haben es durchsucht

Eine Tag-Cloud ist eine Reihe verwandter Tags und ihrer entsprechenden Gewichtungen. Eine typische Tag-Cloud besteht aus 30 bis 150 Tags. Die Gewichtung wirkt sich auf die Schriftgröße oder andere verwendete visuelle Effekte aus. Mittlerweile werden Histogramme oder Kreisdiagramme am häufigsten zur Darstellung von etwa 12 verschiedenen Gewichtungen verwendet. Daher können Tag-Clouds mehr Gewicht darstellen, wenn auch weniger genau. Darüber hinaus sind Tag-Clouds oft interaktiv: Tags sind typischerweise Hyperlinks, die es Benutzern ermöglichen, einen Drilldown zu ihren Inhalten durchzuführen.

Es kann grob als eine Ansammlung verwandter oder irrelevanter Tags verstanden werden, die für jedes Tag nach unterschiedlichen Wichtigkeitsstufen oder anderen Dimensionen gemischt werden und deren Unterschiede hervorheben. Eine solche Ansammlung von Tags wird normalerweise als Tag-Wolke bezeichnet.

Lassen Sie uns kurz über das Prinzip der Tag-Cloud-Implementierung sprechen:
Sobald Sie verstanden haben, was eine Tag-Cloud ist, ist sie einfach zu implementieren. Tatsächlich müssen Sie nur unterschiedliche Stile entsprechend der unterschiedlichen Bedeutung jedes Tags festlegen.
Hier verwenden wir Zufallszahlen, um eine einfache Tag-Cloud zu implementieren, die nicht auf bestimmten Dimensionen basiert, sondern im rein zufälligen Stil. Die Tag-Cloud besteht hier eigentlich aus einer Reihe von Tags, und dann werden Farbe und Schriftgröße zufällig festgelegt. Natürlich gibt es für die Schriftgröße eine maximale und minimale Grenze.
1. Wir richten eine Zufallszahlenfunktion und eine Zufallsfarbfunktion ein und verwenden diese beiden Funktionen, um den Stil für die Beschriftung festzulegen.
2. Wir durchlaufen alle a-Tags und verwenden dann die Zufallszahlen und Zufallsfarben in Schritt 1, um die Schriftgröße und Farbe dieser Tags festzulegen.

Sehen Sie sich die Wirkung wie folgt an:

Eine einfache Tag-Cloud ist alles, was Sie brauchen.

Tatsächlich können wir den Stil auch auf die Stildatei festlegen und dann den Stil des a-Tags festlegen, indem wir die Klasse für das a-Tag festlegen, was eine größere Flexibilität bietet.

Wenn Sie es entsprechend bestimmten Dimensionen festlegen müssen, können Sie die Attribute dieser Dimension auf das Tag a festlegen und dann den Stil entsprechend diesen Attributen festlegen.

Sehen Sie sich den folgenden Code an:

HTML-Code:

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

Nach dem Login kopieren

Javascript-Code:

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

Nach dem Login kopieren

Der obige Artikel zeigt Ihnen, wie Sie mit Javascript einen zufälligen Tag-Cloud-Effekt erzielen. Der angehängte Code ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.