先來看一下效果
代碼如下
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>隨機標簽雲</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"); //隨機方法 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"; } } } </script> </head> <body> <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> </body> </html>
這個的算法較為簡單(偶能看得懂 orz....),但也基本上實現了要求
以上就是本文的全部內容,了解更多JavaScript的語法,大家可以查看:《JavaScript 參考教程》、《JavaScript代碼風格指南》,也希望大家多多支持。