猿问

逢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
浏览 2593回答 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) } } }
0

习惯受伤

你这段代码写的太繁琐了，我写了一段，你参考一下：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(''); };来个效果图：是这样吗？
1

慕婉清5044891

MBQZIYHDNWSYADGVGIEUKMYUKGCLORNKYTJDGPYCLIEHHWZMWFCZIYHLBKTQLCLBYUNWLVETJSVEHUXZCSBWGQGPADTJSHETJZQSIFBXGWFBMIGVLHJMIXNQTFAQNCFOEGQLDGDMCYUYNQMNKFPRVFILIRAOQGVLIYBDTWYZPLUETCACBDGIZCFTDMVVRHDUEHDGBDLOKTQLBYUWBKTCFBXMCYCSWFBLUJGQTQATVEAKGCZCEPVKTWZCZVYNXYVRAIYHDNWSLMVSHXNWFVZKZIYHQLVENQJSCSAKSCFVFVLNXMJUJZUDADSIFIGVRHFSOXNQLVXGQZVYNWZWEILUEIXMIKAJMCFBMOXACZVXNKZMBLHXZWGWZVNWFDMPLZCMUZPZCDTPSIMIYOXADZAJZVFBXGJSOEAJGHTOQTJTVLGQMNJFCSHQMPMCVLUDTPLOEAKMXMJSOYUQTIGJEHDZIEURNGJFHCSILIKNZBQTJYJFGKFENQMNRHXTDLYAPSIRHWAQLDGJNPLGPLISRZCMBRTJFAWZUWUWGCFVZVZUDZPYBKNJZFHXGJZBCFIZPYOXUJKNDMKEUYUKADEUXMHXZVDNWZPMVWSVFBEFVSHQMDMKSVXTCLOKGDHKZVFOXYMJYUXNJTPFVXNURNWZOXADBXMPSHEORUXFIFPRAETJZVJNCSBXHKTJSUKFPSHXSAQUMIEAWSWLBKNLMBYHKGCYBRHKTJNKNJFVLMIEODYBXTJTFNIYAEAXNWLAPYIKNJZILAUQGKNWKGJFCKTPZWLOROKAPLNDGVLGPMBAWZCYNDGWMCPRBEAWEHRTQKSPLUQNCFPLFHDBJGJLUKGKGIYORNENOSFUKIRHDZIGJEAPMBLAQZKT
0

hulukid

加个计数，当是10的倍数就换行。
0
随时随地看视频慕课网APP

相关分类

Java
JavaScript
JQuery
我要回答