利用循环打印菱形

利用循环打印固定菱形或者能调整的菱形

想要在html中使用循环打印出这种图形
或者更多行的菱形的代码该怎么写？

最简单的办法在文章最底部

首先先分析一下，可以不难看出这个菱形是分成了三部分

首先是上面部分，每层星星个数比上一层都增加两个

然后是 下面部分，每一层都比上一层小两个

最后的部分就是菱形左边的空格了

知道目标后就好办了

首先完成第一部分，打印上面部分的菱形

    //先定义一个变量用来存储需要打印菱形的长度
    var s=3;
    //第一个for循环用来控制第一部分需要打印的层数
    for(var i=1;i<=s;i++){
    //这一个for循环是来控制每一层需要打印的星星个数
        for(var b=1;b<=2*i-1;b++){
        //将星星打印在页面上
            document.write("*")
        }
        //对每一行星星换行，不然星星会全黏在一起
        document.write('<br/>')
    }

敲完上面的代码后网页上打印的是这样

接着我们来完成第二部分，打印下面部分菱形

//由于菱形中间的部分给了第一部分，所以第二部分菱形需要打印的行数要比第一行少一行，
//所以这个for循环循环次数要减一
for(var i=1;i<=s-1;i++){
//接着因为下面部分是倒过来的所有每层打印的星星个数比上一层要少两个
//b<=2*(s-i)可以限制每层循环打印星星的时候都会比上一层少两个
        for(var b=2;b<=2*(s-i);b++){
            document.write("*")
        }
        document.write('<br/>')
    }

当我们全部敲完后得到的图形是这样的

所以我们来完成第三部分，打印每层菱形前面的空格

    for(var i=1;i<=s;i++){
    
    	//这是菱形上面部分的空格，他是每层比上一层多打印一个
        for(var a=1;a<=s-i;a++){
            document.write("&nbsp;")//&nbsp;的意思是在页面上打印一个空格位，直接打空格是没用的
        }
        
        
        for(var b=1;b<=2*i-1;b++){
            document.write("*")
        }
        document.write('<br/>')
    }

	for(var i=1;i<=s-1;i++){//2-1

		//这是菱形下面部分的空格，每一层比上一层少一个空格
        for(var a=1;a<=i;a++){
            document.write("&nbsp;")
        }
        
        for(var b=2;b<=2*(s-i);b++){
            document.write("*")
        }
        document.write('<br/>')
    }

最后得到的图形是这样，可以看到和目标不是很像，这是因为一个空格位比星星占得位置要小，所以看起来并不好看，

把空格换成其他和星星占位一样大的会好看一点

如果加空格位没有看懂，或者想让菱形更好看可以使用下面这种办法
这种方法是最简便的

//使用这句代码后，可以让菱形从整个页面中间开始打印
//所以不需要打印空格或者其他符号就可以让菱形自动对齐
   	document.write('<center/>')
	var a=3;
//这部分是打印菱形上部分
    for(var i=1;i<=a;i++){
        for(var b=1;b<=2*i-1;b++){
            document.write("*")
        }
        document.write('<br/>')
    }
//这部分是打印菱形下面部分
    for(var i=a-1;i>=1;i--){
        for(var b=2*i-1;b>0;b--){
            document.write("*")
        }
        document.write('<br/>')
    }

最后的效果是这样，他会从页面中间打印，