这是一个效果图

1

原理：随机取色，随机字体大小

实现：

1、随机方法：

1
2
3
function rand(num){
return parseInt(Math.random()*num+1);
}

2、随机取色：

1
2
3
4
5
6
7
function randomcolor(){
var str=Math.ceil(Math.random()*16777215).toString(16);
if(str.length<6){
str=“0”+str;
}
return str;
}

3、循环dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for (len = obj.length, i = len; i–;) {
  obj[i].style.left = rand(600) + ”px”;
  obj[i].style.top = rand(400) + ”px”;
  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”;
  }
}

4、dom结构

1
2
3
4
5
6
7
8
9
10
11
<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>