JavaScript入门循环嵌套练习题（9）

最新推荐文章于 2024-09-04 21:21:26 发布

原创最新推荐文章于 2024-09-04 21:21:26 发布 · 629 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

本文深入探讨了JavaScript中for循环的多种应用技巧，包括嵌套循环实现九九乘法表的不同方法，以及如何利用循环打印各种图形，如直角三角形、等腰三角形等。通过实际代码示例，读者可以学习到循环控制结构在实际编程中的灵活运用。

for循环嵌套(第一种方法)if…else

打印九九乘法表

	<script type="text/javascript">
//		 九九乘法表
//		 分析：外层循环控制行数 内层循环控制列数
        for (var i=1;i<=9;i++) {// 控制行数
        	for (var j=1;j<=i;j++) {// 控制列数
	            if(i*j>9){
        		    document.write(i+'*'+j+'='+i*j+'&nbsp;&nbsp;&nbsp;');
        	    }else{
        		    document.write(i+'*'+j+'='+i*j+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
        	    }
        	}
        	document.write('<br />');
        }
	</script>

for循环嵌套(第二种方法)三目语法结构：条件?ture:false
打印九九乘法表

<script type="text/javascript">
//		 九九乘法表
//		 分析：外层循环控制行数 内层循环控制列数
        for (var i=1;i<=9;i++) {// 控制行数
        	for (var j=1;j<=i;j++) {// 控制列数
                document.write(i+'*'+j+'='+i*j+(i*j>9?"&nbsp;&nbsp;&nbsp;":"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"));
        	}
        	document.write('<br />');
        }
</script>

倒九九乘法表
逻辑与上面的一样，只不过条件不一样

	<script type="text/javascript">
        // 倒九九乘法表
        for (var i=9;i>=1;i--) {
        	for (var j=i;j>=1;j--) {
        	    if(i*j>9){
        		    document.write(i+'*'+j+'='+i*j+'&nbsp;&nbsp;&nbsp;');
        	    }else{
        		    document.write(i+'*'+j+'='+i*j+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
        	    }
        	}
        	document.write('<br />');
	</script>

用for循环打印图形：初级练习

	<script type="text/javascript">
	
    	document.writeln('*<br />');//打印一个
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印一行6个
    		document.writeln('*');
    	}
    	document.writeln('<br />');
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印6列
    		document.writeln('*<br />');
    	}
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印6行6列
    		for (var j=0;j<6;j++) {
    			document.writeln('*');
    		}
    		document.writeln('<br />');//每打印一行就换行
    	}
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印6行6列
    		for (var j=0;j<=i;j++) {
    			document.writeln('*');
    		}
    		document.writeln('<br />');
    	}
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印直角三角形
    		for (var j=0;j<i;j++) {
    			document.writeln('*');
    		}
    		document.writeln('<br />');
    	}
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {//打印直角三角形
    		document.writeln('&nbsp;');
    	}
    	document.writeln('*<br />');
    	document.writeln('=========<br />');// 分隔
    	for (var i=0;i<6;i++) {
    		for (var k=0;k<5;k++) {
    			document.writeln('&nbsp;');
    		}
    		document.writeln('<br />');
    	}
    	
	</script>

用for循环打印图形

用for循环打印1，3，5奇数的直角三角形

* 
* * * 
* * * * * 
* * * * * * * 
* * * * * * * * * 
* * * * * * * * * * * 

	<script type="text/javascript">

//      直角三角形
        for (var i=0;i<6;i++) {
        	for (var j=0;j<=(2*i-1)+1;j++) {
        		document.writeln('*');
        	}
        	document.writeln('<br />');
        }

    </script>

用for循环打印输入行数的等腰三角形
若需要几行把所有num换成想要的行数即可

 	 	 	 	*
 	 	 	*	*	*
 	 	*	*	*	*	*
 	*	*	*	*	*	*	*
*	*	*	*	*	*	*	*	*
因为字节的问题，故以下代码放入表格中

	<script type="text/javascript">

        var str=prompt('请输入行数：');
        var num=parseInt(str);
        document.write('<table>');   
        for (var i=1;i<=num;i++) {
        	document.write('<tr>');
           	for(var k=1;k<=num-i;k++){
      	    
        	    document.write('<td>'+'&nbsp;'+'</td>');

        	}
        	for(var j=1;j<=2*i-1;j++){
        		document.write('<td>');
        		document.write('*');
        		document.write('</td>');
        	}
        	document.write('</tr>');

        }
        document.write('</table>');
        
	</script>