Teach you to use JavaScript to achieve random tag cloud effect _ Code _javascript Tips

The tag cloud is a set of related tags and the corresponding weights. The typical label cloud has 30 to 150 labels. Weights affect the font size or other visual effects you use. Also, histograms or pie charts are the most commonly used to represent about 12 different weights. Therefore, the label cloud can represent more power, though not so accurate. In addition, tag clouds are usually interactive: tags are typical hyperlinks that allow users to get a closer look at their content.

It may be understood that a bunch of related or unrelated tags can be mixed together, depending on the degree of importance, or the difference in other dimensions for each label to set different styles has highlighted their differences, such a bunch of tags are the same as we usually say the tag cloud.

Let's talk about the principle of the tag cloud implementation:
Understand the tag cloud is the case, then realize it is simple, in fact, according to the different importance of each label to set different styles on it.
Here we use random numbers to implement a simple tag cloud, not based on some dimension, pure random style. This side of the tag cloud is actually a bunch of a tag, and then randomly set the color and font size, of course, font size has a maximum minimum limit.
1, we set a take random number function, and a random color function, through these two functions for the label style.
2, we put all the A label loop, and then take advantage of the random number inside the step, and random color to set the label font size and color.

See the effect as follows:

A simple tag cloud is over.

Actually, we can do it. The style is set to the style file, and then the style of the A tag is set by setting the class for a label, which is more flexible.

If you need to set it up according to some dimensions, you can set the properties of the dimension to the a label and then set the style according to those properties.

Look at the code below:

HTML code:

<div id= "wrap" >
 <a href= "#" >web Standard learning </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 code:

Window.onload=function () {
 var Obox=document.getelementbyid ("wrap");
 var obj=obox.getelementsbytagname ("a");
 Random method
 function rand (num) {return
  parseint (Math.random () *num+1);
 }
 Random color value
 function Randomcolor () {
  var str=math.ceil (Math.random () *16777215). toString ();
  if (str.length<6) {
   str= "0" +STR;
  }
  return str;
 }
 Loop 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+ "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 ';}}}

The above teaching you to use JavaScript to achieve random tag cloud effect _ code is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.