JavaScript實現的隨機色標簽云

f663x 10年前發布 | 2K 次閱讀 JavaScript

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

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

<script type="text/javascript">

//隨機方法

function rand(num)

{

return parseInt(Math.random()*num+1);

}

//隨機顏色值

function randomColor()

{

var str = Math.ceil((Math.random()*16777215)).toString(16); //把數字轉換成16進制

if(str.length < 6)

{

str = "0" + str;

}

return str;

}

//標簽實現

var aList = document.getElementById("wrap").getElementsByTagName("a");

var i = 0;

var len = aList.length;

for(i;i<len;i++)

{

aList[i].className = "color"+rand(5); //生成隨機類名

aList[i].style.fontSize = rand(12)+12+"px"; //隨機字號

aList[i].style.color = "#"+randomColor();

aList[i].onmouseover = function()

{

this.style.background = "#"+randomColor();

}

aList[i].onmouseout = function()

{

this.style.background = "";

}

}

</script>

</body>

</html></pre>

 本文由用戶 f663x 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!