js基础---元素操作时字符串拼接 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0px;padding:0px;}
			#box{position:relative;}
			#box div{width:20px;height:20px;background:red;position:absolute;}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var oDiv=document.getElementById("box");

			for(var i=0;i<16;i++){
				if(i<8){
					oDiv.innerHTML+='<div style="left:'+20*(i+1)+"px;top:"+20*(i+1)+'px">'+i+'</div>';
					oDiv.innerHTML+='<div style="left:'+20*(i+(16*1+1))+"px;top:"+20*(i+1)+'px">'+(i+16)+'</div>';
					oDiv.innerHTML+='<div style="left:'+20*(i+(16*2+1))+"px;top:"+20*(i+1)+'px">'+(i+32)+'</div>';
				}else{
					oDiv.innerHTML+='<div style="left:'+20*(i+1)+"px;top:"+20*(15-i)+'px">'+i+'</div>';	
					oDiv.innerHTML+='<div style="left:'+20*(i+(16*1+1))+"px;top:"+20*(15-i)+'px">'+(i+16)+'</div>';
					oDiv.innerHTML+='<div style="left:'+20*(i+(16*2+1))+"px;top:"+20*(15-i)+'px">'+(i+32)+'</div>';
				}
			}

			
			
			
		</script>
	</body>
</html>

　　

posted on 2017-12-29 09:35  水墨江山画  阅读(469)  评论(0)    收藏  举报

导航