Teach you how to use javascript to achieve a random tag cloud effect_with code_javascript skills

A tag cloud is a set of related tags and their corresponding weights. A typical tag cloud has 30 to 150 tags. Weight affects the font size or other visual effects used. Meanwhile, histograms or pie charts are most commonly used to represent about 12 different weights. Therefore, the tag cloud can represent more rights, although it is less accurate. Furthermore, tag clouds are often interactive: tags are typically hyperlinks that allow users to drill down to their content.

It can be roughly understood as a bunch of related or irrelevant tags mixed together. Setting different styles for each tag according to different levels of importance or other dimensions highlights their differences. Such a bunch of tags together are We usually call it a tag cloud.

Let’s briefly talk about the principle of tag cloud implementation:
Once you understand what a tag cloud is, it is simple to implement. In fact, you just need to set different styles according to the different importance of each tag.
Here we use random numbers to implement a simple tag cloud, not based on certain dimensions, purely random style. The tag cloud here is actually a bunch of a tags, and then the color and font size are randomly set. Of course, the font size has a maximum and minimum limit.
1. We set up a random number function and a random color function, and use these two functions to set the style for the label.
2. We loop through all a tags, and then use the random numbers and random colors in step 1 to set the font size and color of these tags.

View the effect as follows:

A simple tag cloud is all you need.

In fact, we can also set the style to the style file, and then set the style of the a tag by setting the class for the a tag, which provides greater flexibility.

If you need to set it according to certain dimensions, you can set the attributes of this dimension to the a tag, and then set the style according to these attributes.

Look at the code below:

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>

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

The above article teaches you how to use javascript to achieve a random tag cloud effect_The attached code is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn