Let's see the effect first
The code is as follows
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Random Tag Cloud</title><style type="text/css">*{ margin:0; padding:0}a{ text-decoration:none}#wrap{ width:400px; margin:auto}</style> <script type="text/javascript"> 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(16); 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)+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"; } } } </script></head><body> <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="#">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="#">apple</a> <a href="#"> href="#">google</a> <a href="#">jobs</a> </div></body></html>This algorithm is relatively simple (I can understand orz...), but it basically implements the requirements
The above is the entire content of this article. For more information about JavaScript, you can check out: "JavaScript Reference Tutorial" and "JavaScript Code Style Guide". I also hope that everyone will support Wulin.com more.