JS的for循环

最新推荐文章于 2024-08-01 10:03:35 发布

Krorainas

最新推荐文章于 2024-08-01 10:03:35 发布

阅读量224

点赞数

分类专栏： JS 文章标签： JS的for

本文链接：https://blog.csdn.net/qq_38799237/article/details/85259134

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

for循环嵌套以99乘法表为例

源码如下：

	<style type="text/css">
		
		#wrap{
			width: 800px;
			border-bottom: 1px dashed #CCCCCC;
			padding-bottom: 10px;
		}
		
		#wrap span{
			display: inline-block;
			width: 80px;
			height: 40px;
			border: 1px solid cornflowerblue;
			margin: 2px;
			text-align: center;
			line-height: 40px;
			font-family: arial;
			font-size: 18px;
		}
		
	</style>
	
</head>
<body>
	
	<div id="wrap">
		
		<!--<span id="">
			1*1=1
		</span>-->
		
	</div>
	
	<script type="text/javascript">
		let oWrap = document.getElementById("wrap");
		let s="";
		
		for (let i=1;i<10;i++) {
			
			//根据当前行数，生成不同个的span
			let hh="";
			
			//行号
			for (let j=1;j<=i;j++) {
				
				//ES5
				hh +="<span>"+i+"*"+j+"="+i*j+"</span>";
				
				
				//ES6模板字符串
				//hh += `<span> ${i}*${j}=${i*j} </span>`;
			}
			
			hh += "<br/>";//每行结束的换行符
			s += hh;
		}
		
		s += "<hr><hr>";
		
		for (let i=1;i<10;i++) {
			
			let hh="";
			
			for (let j=i;j<=9;j++) {

				//ES6模板字符串
				hh += `<span> ${i}*${j}=${i*j} </span>`;
			}
			
			hh += "<br/>";//每行结束的换行符
			s += hh;
		}
		
		s += "<hr><hr>";
		
		for (let i=9;i>0;i--) {
			
			let hh="";
			
			for (let j=1;j<=i;j++) {

				//ES6模板字符串
				hh += `<span> ${i}*${j}=${i*j} </span>`;
			}
			
			hh += "<br/>";//每行结束的换行符
			s += hh;
		}
		oWrap.innerHTML = s;
	</script>
	
</body>

最终结果如下

第一种

第二种

第三种

Krorainas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的for循环

for循环嵌套以99乘法表为例源码如下： &amp;lt;style type=&quot;text/css&quot;&amp;gt; #wrap{ width: 800px; border-bottom: 1px dashed #CCCCCC; padding-bottom: 10px; } #wrap span{ display: inline-block...
复制链接

扫一扫

专栏目录