频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
javascript打印完整金字塔型_完整菱形_空心菱形_思路算法详解_js源代码
2012-11-27 08:55:34           
收藏   我要投稿


分析过程如下:

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


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

(2)打印一行6个星号

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

(3)打印6列星号

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

(4)打印6行6列

[html]
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则不成立,跳出内存循环。以此类推。


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

(6)当j<i,那么每行少一个星号,则第一行会被抹掉,如下图所示:

 

[html]
for(var i=0;i<6;i++){ 
                for(var j=0;j<i;j++){ 
                    document.writeln("*"); 
                } 
                document.writeln("<br/>"); 
            } 
(7)空格和星号相结合的情况,完整金字塔就是被空格顶过去的。
打印6个空格,后跟星号

 


[html]
for(var i=0;i<6;i++){ 
                document.writeln(" "); 
            } 
document.writeln("*<br/>"); 
每行5个空格,后跟一个星号

 

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

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

[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个星号。以此类推。

 


[html] 
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个空格。依次类推。

 


[html] 
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,是如何得出?

通过数学归纳法,发现:

 

 


[html] 
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),我们已经可以打印出完整的菱形。

 

[html] 
<span style="white-space:pre">          </span>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] 
<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)空心菱形
暂时没有想到方法,以后解决。

==========

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

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

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

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

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

点击复制链接 与好友分享!回本站首页
上一篇:用jquery模仿的a的title属性
下一篇:生成JSON数据
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站