标签：javascript：第二章for 练习 自动生成v字形的div！
<!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.onload=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.onclick=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.onload=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].onclick=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>
本文出自 “春天里！” 博客，谢绝转载！
javascript：第二章for 练习 自动生成V字形的div！
标签：javascript：第二章for 练习 自动生成v字形的div！
原文地址：http://11180930.blog.51cto.com/11170930/1833524
