自动生成100个div

转载 (原文地址) xiaodading 随笔 js初级 1182阅读 2014-08-21 17:07:35 举报

[code]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{width:50px;height: 50px;background: red;position: absolute;left:0;top: 0;text-align: center;line-height: 50px;}
</style>
</head>
<body>
<input id="btn1" type="button" value="自动生成100个div"/>
</body>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var str='';
for(var i=0; i<100; i++){
str+='<div>'+i+'</div>';
}
document.body.innerHTML=str;
var aDiv=document.getElementsByTagName('div');
var arrColor=['green','red','gray'];
for(var i=0; i<aDiv.length; i++) {
//aDiv[i].style.left = 10+i60+'px';
/
aDiv[i].style.left = 10+parseInt(i%10)60+'px';
aDiv[i].style.top = 10+parseInt(i/10)
60+'px';
aDiv[i].style.background=arrColor[parseInt(i%3)];*/

        aDiv[i].style.left = 10+Math.floor(i%10)*60+'px';
        aDiv[i].style.top = 10+Math.floor(i/10)*60+'px';
        aDiv[i].style.background=arrColor[Math.floor(i%3)];
    }
}

</script>
</html>[/code]代码片段 1

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复