day03--利用for循环做逢10 往下一行练习

RecordInLife

于 2017-01-11 22:29:12 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/itzhengmaolin/article/details/54350461

html5 专栏收录该内容

49 篇文章

订阅专栏

本文通过一个具体的实例演示了如何使用HTML、CSS和JavaScript实现一个简单的布局动画效果。首先创建多个div元素，接着设置它们的样式来形成网格布局，并利用JavaScript动态调整这些div元素的位置，使其呈现出从左到右排列的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
line-height: 50px;
text-align: center;
}
</style>

<script type="text/javascript">
window.οnlοad=function (){
// 1、先创建div
for(var i=0;i<20;i++){
document.body.innerHTML=document.body.innerHTML+'<div>'+i+'</div>';
}

// 2 、再查找div的位置
var aDiv = document.getElementsByTagName('div');
for(var i=0;i<10;i++){
aDiv[i].style.left=20+i*50+'px';
}

// 3 、位置稍微做调整
// aDiv[10].style.top=50+'px';
// aDiv[10].style.left=20+'px';
//
// aDiv[11].style.top=50+'px';
// aDiv[10].style.left=20+50*(11-10)+'px';
for(var i=10;i<20;i++){
aDiv[i].style.left=20+(i-10)*50+'px';
aDiv[i].style.top=50+'px';
}
}
</script>

</head>
<body>
</body>

</html>