第2课--2.4自动生成V字型-只能用定位实现（提高版）

最新推荐文章于 2017-10-27 22:10:20 发布

汪超凡

最新推荐文章于 2017-10-27 22:10:20 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/wcf1991/article/details/78369824

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动生成V字型-只能用定位实现（提高）</title>
	<style>
		body,input{
			padding:0;margin:0;
		}
		#wrap{
			width:500px;
			height:500px;
			border:1px solid blue;
			position:absolute;
			margin:10px 330px;
		}
		#wrap div{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
		}
	</style>

	<script>
	window.onload = function(){
		var oBtn = document.getElementById("button");
		var oWrap = document.getElementById("wrap");

		var l = 0;
		var t = 0;
		var str = "";
		var n = 0;

		oBtn.onclick = function(){
			if(n == 0)
			{
				str = "";
				for(var i = 0;i < 5;i++){

					l = i * 100;

					if(i <= 2){

						t = 400 - i * 100;

					}else{

						t = i * 100;

					}

					str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
				}
			}else if(n == 1)
			{
				str = "";
				for(var i = 0;i < 5;i++){

					t = i * 100;

					if(i <= 2){

						l = i * 100;

					}else{

						l = 400 - i * 100;

					}

					str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
				}
			}else if(n == 2)
			{
				str = "";
				for(var i = 0;i < 5;i++){

					l = i * 100;

					if(i <= 2){

						t = i * 100;

					}else{

						t = 400 - i * 100;

					}

					str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
				}
			}else if(n == 3)
			{
				str = "";
				for(var i = 0;i < 5;i++){

					t = i * 100;

					if(i <= 2){

						l = 400 - i * 100;

					}else{

						l = i * 100;

					}

					str +='<div class = "div1" style = "left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';
				}
			}

			oWrap.innerHTML = str;

			n ++;

			if(n == 4){

				n = 0;
			}
		}
	}
	</script>
</head>
<body>
<input type = "button" value = "按钮" id = "button"/>
	<div id = "wrap">
	</div>
</body>
</html>

汪超凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第2课--2.4自动生成V字型-只能用定位实现（提高版）

自动生成V字型-只能用定位实现（提高） body,input{ padding:0;margin:0; } #wrap{ width:500px; height:500px; border:1px solid blue; position:absolute; margin:10px 330px; } #wrap div{ width
复制链接

扫一扫