js输出一个菱形_JS打印各种形状：金字塔_完整菱形_三角形_思路算法详解_附源代码...

分析过程如下：

(1)先打印一个星号并换行

document.writeln("*
");

(2)打印一行6个星号

//打印一行6个

for(var i=0;i<6;i++){

document.writeln("*");

}

(3)打印6列星号

//打印6列 

for(var i=0;i<6;i++){

document.writeln("*
");

}

(4)打印6行6列

//打印6行6列  

for(var i=0;i<6;i++){

for(var j=0;j<6;j++){

document.writeln("*");

}

//每打印一行后就换行

document.writeln("
");

}

(5)金字塔型是由下面图形转成的，先打印此图形

控制内层循环的打印。观察上图，发现如下规律：

则让内层循环

j<=i，就可以实现。i控制行数，j控制列数。比如：当i=0时，内层循环1次，j=0,j<=i,当j++时，就跳出内层循环；当i=1时，内存循环2次，j=0和j=1的情况，当j=1,j++,

则j=2,j<=i则不成立，跳出内存循环。以此类推。for(var i=0;i<6;i++){

for(var j=0;j<=i;j++){

document.writeln("*");

}

document.writeln("
");

}

(6)当j

for(var i=0;i<6;i++){  

for(var j=0;j

document.writeln("*");

}

document.writeln("
");

}

(7)空格和星号相结合的情况，完整金字塔就是被空格顶过去的。

打印6个空格，后跟星号

for(var i=0;i<6;i++){  

document.writeln(" ");

}

document.writeln("*
");

每行5个空格，后跟一个星号

for(var i=0;i<6;i++){  

for(var k=0;k<5;k++){

document.writeln(" ");

}

document.writeln("*
");

}

以上图像的完整代码：

document.writeln("*
");

document.writeln("=========
");

for(var i=0;i<6;i++){ //打印一行6个

document.writeln("*");

}

document.writeln("
");

document.writeln("=========
");

for(var i=0;i<6;i++){ //打印6列

document.writeln("*
");

}

document.writeln("=========
");

for(var i=0;i<6;i++){ //打印6行6列

for(var j=0;j<6;j++){

document.writeln("*");

}

document.writeln("
"); //每打印一行后就换行

}

document.writeln("=========
");

for(var i=0;i<6;i++){

for(var j=0;j<=i;j++){

document.writeln("*");

}

document.writeln("
");

}

document.writeln("=========
");

for(var i=0;i<6;i++){

for(var j=0;j

document.writeln("*");

}

document.writeln("
");

}

document.writeln("=========
");

for(var i=0;i<6;i++){

document.writeln(" ");

}

document.writeln("*
");

document.writeln("=========
");

for(var i=0;i<6;i++){

for(var k=0;k<5;k++){

document.writeln(" ");

}

document.writeln("*
");

}

有了以上的基础，下面分析打印完整金字塔型：

(8)根据下图所示，我们已经可以打印出左边的图形，然后通过控制空格，把它转成右边的图形。

观察后发现如下规律，右边图形相对于左边的图形。

行数仍然是6行，即i=6，先不考虑空格的问题，每一行星星的个数，如下所示：

可以得出：j<=(2*i-1)+1。当i=0时，j=0，打印一个星号，必须j<=，参考上面的讲解；当i=1时，j=2，因为是j<=i，j取值0，1，2，循环三次，打印3个星号。以此类推。

for(var i=0;i<6;i++){  

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

(9)在(8)的基础上，插入空格。对比发现，如下规律：

再加一层内循环，在星号内循环的前面，先打印空格，然后再打印相应的星号。

可以得出：k<6-i-1;当i=0时，k<5,k取值0，1，2，3，4，循环5次，打印5个空格。依次类推。

for(var i=0;i<6;i++){  

for(var k=0;k<6-i-1;k++){

document.writeln(" ");

}

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

(10)菱形的上半部分已经打印出，下面考虑如何打印下半部分，即打印如下的图形：

最上面的11个星号，已经在上半部分给出，只考虑打印11个星号以下的图形。

观察发现，下半部分共5行，即i=5。有如下的规律，如下图所示：

空格内存循环，k

(9-3*i)+i，是如何得出？

通过数学归纳法，发现：

for(var i=0;i<5;i++){  

for(var k=0;k

document.writeln(" ");

}

for(var m=0;m

document.writeln("*");

}

document.writeln("
");

}

(11)完整的菱形，通过(10)和(11)，我们已经可以打印出完整的菱形。

for(var i=0;i<6;i++){

for(var k=0;k<6-i-1;k++){

document.writeln(" ");

}

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

for(var i=0;i<5;i++){

for(var k=0;k

document.writeln(" ");

}

for(var m=0;m

document.writeln("*");

}

document.writeln("
");

}

完整代码如下所示：//实在想不出，就用笨法一个一个打印，先出效果

//打印菱形的上半部分

for(var i=0;i<6;i++){

for(var k=0;k<6-i-1;k++){

document.writeln(" ");

}

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

//打印菱形的下半部分

for(var i=0;i<5;i++){

for(var k=0;k

document.writeln(" ");

}

for(var m=0;m

document.writeln("*");

}

document.writeln("
");

}

document.writeln("=============
");

for(var i=0;i<6;i++){

for(var k=0;k<6-i-1;k++){

document.writeln(" ");

}

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

document.writeln("=============
");

for(var i=0;i<6;i++){

for(var j=0;j<=(2*i-1)+1;j++){

document.writeln("*");

}

document.writeln("
");

}

document.writeln("=============
");

for(var i=0;i<5;i++){

for(var k=0;k

document.writeln(" ");

}

for(var m=0;m

document.writeln("*");

}

document.writeln("
");

}

不要一步就打印出完整的金字塔型和完整的菱形，除非你已经是老手了。

为什么你做不出：因为你想快不想慢，光想，而不去实现代码。也不要想一步就写好最优秀的代码，也不可能，先把上面的实现了，再考虑代码算法的优化。

一步一步来，步骤(1)到步骤(11)，就是思考的过程。

这个题的意义在于：1、对for循环的加深理解；2、对算法步骤的分析过程

不要说我做不出来，就不写代码，哪怕你用最笨的方法，依然可以做出。document.writeln();一个空格一个星号定位，依然可以打印出。

没有谁比谁聪明多少，只有你比别人懒多少。

作者：韩顺平

欢迎您加入“Helloweb” 学习交流群： 196291215&nbsp共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！