<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:50px; height:50px; background:red; position:absolute; top:0; left:0; font-size:30px; text-align:center; line-height:50px; color:#fff; }
</style>
<script>
window.onload = function (){
var aDiv = document.getElementsByTagName('div');
for( var i=0; i<50; i++ ){
document.body.innerHTML += '<div>' + i + '</div>';
}
for( var i=0; i<aDiv.length; i++ ){
aDiv[i].style.left = 10 + i*60 + 'px';
//应该不是像我这样写的吧....
for (var j = 10; j < 20; j++) {
aDiv[j].style.top = 60 + 'px';
aDiv[j].style.left = 10 + (j-10)*60 + 'px';
}
for (var j = 20; j < 30; j++) {
aDiv[j].style.top = 120 + 'px';
aDiv[j].style.left = 10 + (j-20)*60 + 'px';
}
}
};
</script>
</head>
<body>
</body>
</html>50个方形div，10个一组，排成5行怎么写？
3 回答
慕粉4075985
TA贡献104条经验 获得超33个赞
div {
width: 50px;
height: 50px;
border: 1px solid red;
padding: 10px 10px;
float: left;
}
.clear{ clear:left;}
window.onload=function(){
for (var i=1 ;i<51;i++){
if((i-1)%10==0){
var div = document.createElement("div")
div.innerHTML=i
document.body.appendChild(div)
div.className="clear"
}
else{
var div = document.createElement("div")
div.innerHTML=i
document.body.appendChild(div)
}
}
}
习惯受伤
TA贡献885条经验 获得超1144个赞
你这段代码写的太繁琐了，我写了一段，你参考一下：
window.onload = function (){
var html = [];
for( var i=0; i<50; i++ ){
var left = 10 + (i%10)*60 + 'px';
var top = parseInt(i / 10) * 60 + 'px';
var el= '<div style="top:'+ top + ';left:'+left+';">' + i + '</div>';
html.push(el);
}
document.body.innerHTML += html.join('');
};来个效果图：
是这样吗？
添加回答
举报
0/150
提交
取消