<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>


div{

width:50px;

height:50px;

background-color:#FF0000;

color:#FFFFFF;

font-size:30px;

position:absolute;

left:0px;

top:0px;

text-align:center;

line-height:50px;

font-weight:bold;

}


</style>

<script>


window.οnlοad=function(){

var oBtn1=document.getElementById('btn1');

var num=5;

var nums=num%2;//=1

var nm=(num-nums)/2;//=2

var str='';

for(var i=0;i<num;i++){

str=str+'<div>'+(i+1)+'</div>';

}

oBtn1.οnclick=function(){

document.body.innerHTML+=str;

var aDv=document.getElementsByTagName('div');

for(var a=0;a<num;a++){

if(a>nm){

nm--;

aDv[a].style.left=10+a*50+'px';

aDv[a].style.top=40+nm*50+'px';

}else{

aDv[a].style.left=10+a*50+'px';

aDv[a].style.top=40+a*50+'px';

}

}

}

}


</script>

</head>


<body>


<input id="btn1" type="button" value="小方块自动生成一个V字形" />


</body>

</html>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>


#div1 div {

width:50px;

height:50px;

background-color:red;

color:#FFFFFF;

font-size:30px;

position:relative;

left:0px;

top:0px;

text-align:center;

line-height:50px;

font-weight:bold;

display:inline-block;

}

#div1{width:800px;height:800px;background:#ccc;margin:0 auto;}

</style>

<script>

window.οnlοad=function(){

var btn =document.getElementById('btn1');

var btn1=document.getElementsByTagName('input');

var div=document.getElementById('div1');

var str='';

for(var i=0;i<10;i++){

str+='<div>'+(i+1)+'</div>';

}

btn1[0].οnclick=function(){

div.innerHTML=str;

var divs= div1.getElementsByTagName('div');

for(var j=0;j<divs.length;j++){

divs[j].style.left='';

divs[j].style.top='';

}

}

}

</script>


</head>


<body>


<input id="btn1" type="button" value="小方块自动生成一个V字形" />

<div id="div1"></div> 

</body>

</html>