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

最新推荐文章于 2022-07-07 18:24:54 发布

S1mp1e

最新推荐文章于 2022-07-07 18:24:54 发布

阅读量3.3k

点赞数 1

分类专栏： web 文章标签： html for js

本文链接：https://blog.csdn.net/S1mp1e/article/details/43371741

版权

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

摘要由CSDN通过智能技术生成

<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.οnlοad=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++)