第2课--2.2自动生成100个LI-只能用定位实现（提高版）

最新推荐文章于 2021-05-30 21:57:30 发布

汪超凡

最新推荐文章于 2021-05-30 21:57:30 发布

阅读量266

点赞数

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

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

版权

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

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动生成10个Li-只能用定位实现</title>
	<style>
		body,input{
			margin:0;padding:0;
		}
		#wrap{
			position:absolute;
		}
		div{
			position:absolute;
		}
	</style>

	<script>

		window.onload = function()
		{

			var oBtn = document.getElementById("button");
			var oWrap = document.getElementById("wrap");

			var arr = ["red","yellow","blue","green"];

			var l = 0;

			var t = 30;
			var str = "";

			oBtn.onclick = function()
			{
				for(var i = 0;i < 100;i++)
				{

					if(i > 1 && i % 10 == 0)
					{

						l = 0;

						t += 62;
					}

				    str += '<div class = "div'+ i +'" style = "width:50px;height:50px;background:'+ arr[i % 4] +';font-size:20px;border:1px solid black;left:'+ l +'px;top:'+ t +'px;">'+ i +'</div>';

				    l += 60;

				}

				oWrap.innerHTML += str;
				 
			}

		}
	</script>
</head>
<body>
	<div id = "wrap">
		<input type = "button" value = "自动生成10个Li" id = "button"/><br/>
	</div>
</html>

汪超凡

关注

0
点赞
踩
0

收藏

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

自动生成10个Li-只能用定位实现 body,input{ margin:0;padding:0; } #wrap{ position:absolute; } div{ position:absolute; } window.onload = function() { var oBtn = document.getEleme
复制链接

扫一扫