from:(一站学习javascript) http://www.onejs.net/article-332-1.html
一个简单的标签云就完事了。
其实我们还可以吧样式设置到样式文件,然后通过为a标签设置class来设置a标签的样式,这样灵活性更大。
如果需要根据某些维度来设置的话,那么可以给a标签设置好这种维度的属性,然后根据这些属性来设置样式。
下面看代码:
html代码:
<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代码:
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"
;
}
}
}