javascript打印完整金字塔型_完整菱形_空心菱形_思路算法详解_js源代码

来源：互联网发布：ubuntu系统下载iso 编辑：程序博客网时间：2024/06/17 21:13

文西马龙：http://blog.csdn.net/wenximalong/

在第23讲有作业，如下图所示：

分析过程如下：

（1）先打印一个星号并换行

document.writeln("*<br/>");

（2）打印一行6个星号

for(var i=0;i<6;i++){ //打印一行6个document.writeln("*");}

（3）打印6列星号

for(var i=0;i<6;i++){ //打印6列document.writeln("*<br/>");}

（4）打印6行6列

for(var i=0;i<6;i++){ //打印6行6列for(var j=0;j<6;j++){document.writeln("*");}document.writeln("<br/>"); //每打印一行后就换行}

（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("<br/>");}

（6）当j<i，那么每行少一个星号，则第一行会被抹掉，如下图所示：

for(var i=0;i<6;i++){for(var j=0;j<i;j++){document.writeln("*");}document.writeln("<br/>");}

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

打印6个空格，后跟星号

for(var i=0;i<6;i++){document.writeln(" ");}document.writeln("*<br/>");

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

for(var i=0;i<6;i++){for(var k=0;k<5;k++){document.writeln(" ");}document.writeln("*<br/>");}

以上图像的完整代码：xingxing.html

<html><head><script language="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++){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(" ");}document.writeln("*<br/>");document.writeln("=========<br/>");for(var i=0;i<6;i++){for(var k=0;k<5;k++){document.writeln(" ");}document.writeln("*<br/>");}</script></head><body></body></html>

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

（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("<br/>");

（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("<br/>");}

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

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

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

空格内存循环，k<i+1，星号内层循环，m<(9-3*i)+i。

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

通过数学归纳法，发现：

for(var i=0;i<5;i++){for(var k=0;k<i+1;k++){document.writeln(" ");}for(var m=0;m<(9-3*i)+i;m++){document.writeln("*");}document.writeln("<br/>");}

（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("<br/>");}for(var i=0;i<5;i++){for(var k=0;k<i+1;k++){document.writeln(" ");}for(var m=0;m<(9-3*i)+i;m++){document.writeln("*");}document.writeln("<br/>");}

完整代码如下所示：

<html><head><script language="javascript">//实在想不出，就用笨法一个一个打印，先出效果//打印菱形的上半部分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("<br/>");}//打印菱形的下半部分for(var i=0;i<5;i++){for(var k=0;k<i+1;k++){document.writeln(" ");}for(var m=0;m<(9-3*i)+i;m++){document.writeln("*");}document.writeln("<br/>");}document.writeln("=============<br/>");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("<br/>");}document.writeln("=============<br/>");for(var i=0;i<6;i++){for(var j=0;j<=(2*i-1)+1;j++){document.writeln("*");}document.writeln("<br/>");}document.writeln("=============<br/>");for(var i=0;i<5;i++){for(var k=0;k<i+1;k++){document.writeln(" ");}for(var m=0;m<(9-3*i)+i;m++){document.writeln("*");}document.writeln("<br/>");}</script></head><body></body></html>

（12）空心菱形

~~暂时没有想到方法，以后解决。~~

完整空心菱形的讲解在我的这篇博文中：韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理

==========

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

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

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

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

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

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录