js for循环练习(生成方块阵列与V字形)

最新推荐文章于 2022-08-07 15:49:38 发布

原创最新推荐文章于 2022-08-07 15:49:38 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #for #js

web 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript的for循环来动态生成HTML方块阵列，并根据用户输入实现V字形布局。通过示例代码展示了如何调整元素的位置，以实现两种不同的布局效果：正方形阵列和V字形排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<meta charest="utf-8">
		<title>for循环练习综合</title>
		<style>
			#list { position: relative;}
			li { width: 50px; height: 50px; position: absolute;top: 0px; left: 0px; background: red; font: 30px; line-height: 50px;text-align: center; display: block;}
		</style>
		<script>
			window.onload=function()
			{
				var oBtn=document.getElementById('btn');	
				var aLi=document.getElementsByTagName('li');
				var oContent=document.getElementById('content');
				var oTxt=document.getElementById('txt');
				var oList=document.getElementById('list');
				function fn_1()
				{
					for(var i=0;i<(aLi.length+1)/2;i++)
					{
						aLi[i].style.left= i*51+'px';
						aLi[i].style.top= i*51+'px';
					}
					for(var i=(aLi.length+1)/2;i<aLi.length;i++)
					{
						aLi[i].style.left= i*51+'px';
						aLi[i].style.top= (aLi.length-1-i)*51+'px';
					}
				}
				function fn_2()
				{
					for(var i=0;i<aLi.length;i++)
						{
							aLi[i].style.left=i%10*51 +'px';
							aLi[i].style.top=(parseInt(i/10))*51 + 'px';
						}
				}
				/*function fn_3()
				{
					for(var i=0;i<(aLi.length+1)/2;i++)
					{
						aLi[i].style.top= i*51+'px';
						aLi[i].style.left=i*51+'px';
					}
					for(var i=(aLi.length+1)/2;i<aLi.length;i++)
					{
						aLi[i].style.top= i*51+'px';
						aLi[i].style.left=(aLi.length-1-i)*51+'px';
					}
				}*/
				oBtn.onclick=function()
				{
					oList.innerHTML = "";
					for(var i=0;i<oTxt.value;i++)
						{
							oList.innerHTML += "<li>"+i+"</li>";
						}
					if(oTxt.value%2==0) 
						{
							fn_2();	

						}
					else
						{
							fn_1();
						}
					oTxt.value='';	
				}	
			}
		</script>
	</head>
	<body>
		<div id="text">
		<p>请输入用于生成V字形或方块整列的方快数:</p>
		<input type="text" value="" id="txt">
		<input type="button" value="确定钮" id="btn" >
		</div>
		<div id="content">
			<ul id="list"></ul>
		</div>
	</body>
</html>