盖房子

来源：互联网发布：linux修改root密码编辑：程序博客网时间：2024/05/16 18:50

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<styletype="text/css">

.wrap{

width:800px;

height:500px;

border:1px solid black;

margin:0 auto;

position:relative;

}

.row{

position:absolute;

bottom:0;

left:0;

}

.row>div{

width:20px;

height:20px;

border:1px solid deeppink;

background-color: mediumspringgreen;

float:left;

box-sizing:border-box;

}

</style>

</head>

<body>

<divclass="wrap">

</div>

<scripttype="text/javascript">

// 先获取oWrap

varoWrap = document.getElementsByClassName("wrap")[0];

// 创建oRow节点，类型div

varoRow = document.createElement("div");

oWrap.appendChild(oRow);

oRow.setAttribute("class","row");

var aDivs = [];

// 创建20个小div，将创建完成的div添加为oRow的给子节点

for(var i = 1; i<= 20; i++) {

aDivs[i] = document.createElement("div");

oRow.appendChild(aDivs[i]);

}

var maxWidth = oWrap.clientWidth - oRow.offsetWidth;

var timer = null;

clearInterval(timer);

var speed = 1;

timer = setInterval(function(){

if(oRow.offsetLeft >= maxWidth || oRow.offsetLeft < 0) {

speed= speed * -1;

}

oRow.style.left= oRow.offsetLeft + speed +'px';

},20)

</script>

</body>

</html>

0 0