JavaScript中使用for循环打印简单的三角形，等腰三角形，菱形，空心三角形，空心菱形

打印一个简单的等腰三角形

<script>
			for(var i=0;i<=5;i++){
			for(var j=0;j<=5-i;j++){
			    document.writeln("&nbsp;");
			    }
			for(var k=0;k<i;k++){
			    document.writeln('口');
			    }
			document.writeln("</br>")
		 }
	</script>

打印一个正方形

<script>
    	for (var a=1;a<=5;a++) {
			for (var b=5;b>=1;b--) {
				document.write('口')
			}
	document.write('<br />')
 </script>

打印一个倒过来的三角形

<script>
	for (var a=1;a<=5;a++) {
			for (var b=1;b<=5;b++) {
				if (a>b) {
				document.write('&nbsp;&nbsp;')
				} else{	
					document.write('口')
					}
			}
		document.write('<br />')
		}
</script>

根据以上，还可以进一步的修饰一下，比如打印每行个数为奇数递增的三角形
假如输入5的时候

<script>
		var tan = window.prompt("请输入数字");
		var num=parseInt(tan);
		for (var a=1;a<num;a++) {
					for (var b=1;b<=2*a+1;b++) {
					document.write('o');
					}
		document.write('<br />')
		}	
</script>

，
还可以打印出每行个数为奇数递增的等腰三角形

<script>
	document.write("<table>")
			for(var i=0;i<num;i++){
			document.write("<tr>")
				for (var k=0;k<=num-i;k++) {
					document.write("<td>"+"&nbsp;"+"</td>");
				}
				for (var x=1;x<=2*i+1;x++) {
					document.write("<td>"+"o"+"</td>");
				}
			document.write("</tr>")
			}
		document.write("</table>")
</script>

还是当num=5的时候

还可以打印一下菱形

<script>
	document.write('<table>');
		for (var a=1;a<num;a++) {
			document.write('<tr>');
			for (var b=1;b<=num;b++) {
				document.write('<td>');	
				if (a>=b) {
					document.write('o')
				} else{	
				document.write('&nbsp;')
					}
				document.write('</td>');
			}
		document.write('</tr>');
		}
		
		for (var c=1;c<=num;c++) {
			document.write('<tr>');
			for (var d=1;d<=num;d++) {
				document.write('<td>');	
				if (c>d) {
				document.write('&nbsp;')
				} else{	
					document.write('o')
					}
				document.write('</td>');
			}
		document.write('</tr>');
		}
	document.write('</table>');
</script>

效果如下：

当然了，还可以通过一些条件限制，来满足打印空心的图形，上面和下面的代码当中，有的添加了表格，是因为显示的时候浏览器有点小瑕疵，不能满足显示效果，不知道别人是通过什么办法让显示效果更佳的

打印一个空心三角形

<script>
	var tan = window.prompt("请输入行数");
		var num=parseInt(tan);
//		打印空心三角形
		document.write('<table>');
		for(var i = 1; i <= num; i++) {
		document.write('<tr>');
			for(var j = 1; j <= num - i; j++) {
				//1.输入前面的空格使三角形进行变形
				document.writeln('<td>'+"&nbsp;"+'</td>');
			}
				//2.输入*和空格
			for(var k = 1; k <= 2*i - 1; k++) {
				//3.第一行与最后一行全部打印*
				if (i == 1 || i ==num) {
					document.writeln('<td>'+"o"+'</td>');
				}else {
					if(k == 1 || k == 2*i -1) {
						document.writeln('<td>'+"o"+'</td>');
					}else {
						document.writeln('<td>'+"&nbsp;"+'</td>'); 
					}
				}
			}
				//换行
		document.write('<tr>');
		}
		document.write('</table>');
</script>

同样，当输入行数为5时：

打印一个空心菱形:

<script>
//		打印空心菱形
			1.打印上面的部分
		document.write('<table>');
			for (var i=0;i<num;i++) {
	//			前面的空格
			document.write('<tr>');
				for (var k=1;k<num-i;k++) {
					document.writeln('<td>'+"&nbsp;"+'</td>');
				 }
	//			每行每列的空格和图案
				for (var j=0;j<2*i+1;j++) {
						if ((j!=1)&&(j!=2*i-1)) {
						document.writeln('<td>'+"&nbsp;"+'</td>');
					} else{
							document.writeln('<td>'+"o"+'</td>');
						}
				}
			document.write('<tr>');
			 }
	//		2.打印下面的部分 
	    for(var i=num-2;i>0;i--){
			document.write('<tr>');
	          for(var j=num;j>i;j--){
	//			前面的空格
	             document.writeln('<td>'+"&nbsp;"+'</td>');
	          }
	//			每行每列的空格和图案
	          for(var k=1;k<=(2*i-1);k++){
		            if(k==1 || k==(2*i-1)){
						document.writeln('<td>'+"o"+'</td>');
		            }else{
	             document.writeln('<td>'+"&nbsp;"+'</td>');
		            }
	          }
			document.write('<tr>');
	       }
		document.write('</table>');
</script>

这次我们让num=9，效果如下：