第2课--2.3自动生成V字型-只能用定位实现

最新推荐文章于 2024-06-15 16:20:27 发布

汪超凡

最新推荐文章于 2024-06-15 16:20:27 发布

阅读量282

点赞数

分类专栏：妙味课堂Js基础课后练习文章标签： JS基础妙味课堂

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

版权

妙味课堂Js基础课后练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动生成V字型-只能用定位实现</title>
	<style>
		#content{
			width:500px;
			height:500px;
			border:1px solid red;
			position:absolute;
		}
		#content div{
			width:100px;
			height:100px;
			background:red;
			font:30px/30px "宋体";
			position:absolute;
		}
	</style>
	<script>
	window.onload = function(){
		var oBtn = document.getElementById("button");
		var oContent = document.getElementById("content");
		var str = "";
		var l = 0;
		var t = 0;
		oBtn.onclick = function(){
			for(var i = 0;i < 5;i++){

				l = i * 100;

				if(i <= 2){
					t = i * 100;
				}else{
					t = 400 - i * 100;	
				}

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

			oContent.innerHTML = str;
		}
	}
	</script>
</head>
<body>
	<input type = "button" value = "click" id = "button"/>
	<div id = "content">
	</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

汪超凡

关注关注

0
点赞
踩
0

收藏

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

自动生成V字型-只能用定位实现 #content{ width:500px; height:500px; border:1px solid red; position:absolute; } #content div{ width:100px; height:100px; background:red; font:30px/30px
复制链接

扫一扫