zoukankan      html  css  js  c++  java
  • 如何用JavaScript制作循环图形

    【图题思路】
                
     1.确定图形一共几行,即为外层的循环的次数
     2.确定每行有几种元素,代表有几个内层循环
     3.确定每种元素的个数,即为每个内层循环的次数
    Tips:通常,找出每种元素的个数与行号的关系,即为当前内层循环的最大值

     长方形:每行循环5次,再循环5行

    <script type="text/javascript">
                
                
                for(var a=1;a<=5;a++){
                    for(var b=1;b<=5;b++){
                        document.write("*");
                    }
                    document.write("<br />")
                }
                
                
                
            </script>

    直角三角形:类似长方形,只不过行内循环次数与行次相等

    <script type="text/javascript">
                
                
                for(var a=1;a<=5;a++){
                    for(var b=1;b<=a;b++){
                        document.write("*");
                    }
                    document.write("<br />")
                }
                
                
                
            </script>

     平行四边形:先设计一个随行次增加的空格循环,加在长方形内

    <script type="text/javascript">
                
                    
                for(var a=1;a<=5;a++){
                    for(var c=1;c<a;c++){
                        document.write("&nbsp&nbsp")
                    }
                    
                    for(var b=1;b<=5;b++){
                        document.write("*");
                        
                    }
                    document.write("<br/>")
                    
                    
                }
               
            </script>

     菱形:分为上下两部分,上面部分类似于平行四边形结构,找到*数目与行次的关系为2n-1,完成上面循环。下半部分将上部分反过来。

    <script type="text/javascript">
                
                for(var a = 1;a<=7;a=a+2){
                    for(var c=1;c<=(7-a)/2;c++){
                        document.write("&nbsp&nbsp")
                    }
                    
                    
                    
                    for(var b = 1;b<=a;b=b+1){
                        document.write("1")
                    }
                    
                    document.write("<br />")
                }
                for(var a = 5;a>=1;a=a-2){
                    for(var c=1;c<=(7-a)/2;c++){
                        document.write("&nbsp&nbsp")
                    }
                    for(var b = 1;b<=a;b=b+1){
                        document.write("1")
                    }
                    document.write("<br />")
                }
                
                
     </script>

    数字等边三角形:类似于菱形上半部分,但是要分为左右两个循环,左侧为递增,个数为行次,右侧为递减个数为行次-1

    <script type="text/javascript">
                
                var d;
                
                
                for(var a = 1;a<=7;a=a+2){
                    for(var c=1;c<=(7-a)/2;c++){
                        document.write("&nbsp&nbsp")
                    }
                    
                    for(var b = 1;b<=(a+1)/2;b=b+1){
                        document.write(b)
                    }
                    
                    for(var b = (a-1)/2;b>=1;b=b-1){
                        document.write(b)
                    }
                    
                    document.write("<br />")
                }
                
                
                
       </script>

    九九乘法表

    <script type="text/javascript">
                
                document.write("<table border='1px' bordercolor='black' align='center'>" )
                for(var a = 1;a<=9;a++){
                    
                    document.write("<tr>")
                    for(var b =1,c=1,e=b*c; b<=a;b++,c++){
                        document.write("<td>"+b+"*"+c+"="+e+"</td>")
                    }
                
                    
                    document.write("</tr>")
                }
                
                document.write("</table>")
                
                
            </script>

  • 相关阅读:
    Comparison of Performance Testing Tools
    软件测试两年总结
    利用FSO生成QTP测试报告
    Web 2.0 再思考(三)「搭讪」是需要理由的
    脑子里想的是A,嘴巴上说的是B,实际上做的是C,幻想前景远大的是D,可真正赚钱的恰恰却是E
    东莞镇区实力排名榜
    狂籌資計畫
    转载:日剧和韩剧的区别
    Web 2.0 再思考(一)「关系」才是重点
    炒股
  • 原文地址:https://www.cnblogs.com/Lmey/p/6684834.html
Copyright © 2011-2022 走看看