逢10 往下一行排怎么写
<!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行怎么写？
啊啊啊啊123浏览 2724回答 3
3回答
-
慕粉4075985
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) } } } -
习惯受伤
你这段代码写的太繁琐了，我写了一段，你参考一下：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(''); };来个效果图：是这样吗？ -
慕婉清5044891
MBQZIYHDNWSYADGVGIEUKMYUKGCLORNKYTJDGPYCLIEHHWZMWFCZIYHLBKTQLCLBYUNWLVETJSVEHUXZCSBWGQGPADTJSHETJZQSIFBXGWFBMIGVLHJMIXNQTFAQNCFOEGQLDGDMCYUYNQMNKFPRVFILIRAOQGVLIYBDTWYZPLUETCACBDGIZCFTDMVVRHDUEHDGBDLOKTQLBYUWBKTCFBXMCYCSWFBLUJGQTQATVEAKGCZCEPVKTWZCZVYNXYVRAIYHDNWSLMVSHXNWFVZKZIYHQLVENQJSCSAKSCFVFVLNXMJUJZUDADSIFIGVRHFSOXNQLVXGQZVYNWZWEILUEIXMIKAJMCFBMOXACZVXNKZMBLHXZWGWZVNWFDMPLZCMUZPZCDTPSIMIYOXADZAJZVFBXGJSOEAJGHTOQTJTVLGQMNJFCSHQMPMCVLUDTPLOEAKMXMJSOYUQTIGJEHDZIEURNGJFHCSILIKNZBQTJYJFGKFENQMNRHXTDLYAPSIRHWAQLDGJNPLGPLISRZCMBRTJFAWZUWUWGCFVZVZUDZPYBKNJZFHXGJZBCFIZPYOXUJKNDMKEUYUKADEUXMHXZVDNWZPMVWSVFBEFVSHQMDMKSVXTCLOKGDHKZVFOXYMJYUXNJTPFVXNURNWZOXADBXMPSHEORUXFIFPRAETJZVJNCSBXHKTJSUKFPSHXSAQUMIEAWSWLBKNLMBYHKGCYBRHKTJNKNJFVLMIEODYBXTJTFNIYAEAXNWLAPYIKNJZILAUQGKNWKGJFCKTPZWLOROKAPLNDGVLGPMBAWZCYNDGWMCPRBEAWEHRTQKSPLUQNCFPLFHDBJGJLUKGKGIYORNENOSFUKIRHDZIGJEAPMBLAQZKT -
hulukid
加个计数，当是10的倍数就换行。
随时随地看视频慕课网APP
相关分类
Java
JavaScript
JQuery