您的位置：首页 > 其它

第2课--2.4自动生成V字型-只能用定位实现（提高版）

2017-10-27 22:09 323 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动生成V字型-只能用定位实现（提高）</title>
<style>
body,input{
padding:0;margin:0;
}
#wrap{
width:500px;
height:500px;
border:1px solid blue;
position:absolute;
margin:10px 330px;
}
#wrap div{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>

<script>
window.onload = function(){
var oBtn = document.getElementById("button");
var oWrap = document.getElementById("wrap");

var l = 0;
var t = 0;
var str = "";
var n = 0;

oBtn.onclick = function(){
if(n == 0)
{
str = "";
for(var i = 0;i < 5;i++){

l = i * 100;

if(i <= 2){

t = 400 - i * 100;

}else{

t = i * 100;

}

str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
}
}else if(n == 1)
{
str = "";
for(var i = 0;i < 5;i++){

t = i * 100;

if(i <= 2){

l = i * 100;

}else{

l = 400 - i * 100;

}

str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
}
}else if(n == 2)
{
str = "";
for(var i = 0;i < 5;i++){

l = i * 100;

if(i <= 2){

t = i * 100;

}else{

t = 400 - i * 100;

}

str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
}
}else if(n == 3)
{
str = "";
for(var i = 0;i < 5;i++){

t = i * 100;

if(i <= 2){

l = 400 - i * 100;

}else{

l = i * 100;

}

str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
}
}

oWrap.innerHTML = str;

n ++;

if(n == 4){

n = 0;
}
}
}
</script>
</head>
<body>
<input type = "button" value = "按钮" id = "button"/>
<div id = "wrap">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航