自動生成10個Li

自動生成10個Li,代碼如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{
			width:50px;
			height:50px;
			background:red;
			border:1px solid #000;
			font:40px/50px '宋體';
			left:0;
			top:0;
			position:absolute;
			text-align:center;
		}
	</style>
	<script>
	window.onload = function(){
		var oBtn = document.getElementById("btn");
		var oDiv = document.getElementsByTagName("div");


			oBtn.onclick = function(){
			for(var i=0;i<10;i++){
				document.body.innerHTML += '<div>'+i+'</div>';
				oDiv[i].style.left=10+i*60+'px';
				oDiv[i].style.top=60+'px';
			};
			for(var i=0;i<10;){

				oDiv[i].style.background='red';
				oDiv[i+1].style.background='yellow';
				oDiv[i+2].style.background='blue';
				oDiv[i+3].style.background='green';
				i+=4;
			}

		};
	};
	</script>
</head>
<body>
	<input id="btn" type="button" value="自動生成10個Li"/>
</body>
</html>



發佈了37 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章