JS在浏览器中输出各种三角形

最新推荐文章于 2023-03-06 14:15:58 发布

转载最新推荐文章于 2023-03-06 14:15:58 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daofaziran/p/9259402.html

文章标签：

#javascript #ViewUI

本文通过JavaScript代码展示了如何绘制各种几何图形，包括直角三角形、倒直角三角形、斜三角形、等腰三角形及菱形，并生成了99乘法表。

直角三角形

 <script type="text/javascript">
          for(var i=1;i<=8;i++){
              for(var j=1;j<=i;j++){//j 指的是*的个数
      　　document.write("*");
   }
          document.write('<br>');
}
          document.write("<hr />");//增加一个分割线
          document.write("<hr />");//增加一个分割线

    </script>

直角三角形

倒直角三角形

 <script type="text/javascript">
          for(var i=1;i<=8;i++){  //控制行
              for(var j=1;j<=8-i;j++){  //控制列
      　　document.write("*");
   }

         document.write('<br>');
}
         document.write("<hr />");
         document.write("<hr />");//增加一个分割线
    </script>

倒直角三角形

斜三角形

 <script type="text/javascript">
        for (var i = 1; i <= 6; i++) {
            for (var j = 1; j <= 6-i; j++) {//j 指的是空格的个数
                  document.write(" ");
            }

            for (var k = 1; k <= i; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
         document.write("<hr />");
    </script>

斜三角形

等腰三角形

 <script type="text/javascript">
            for (var i = 1; i <= 6; i++) {
            for (var j = 1; j <= 6-i; j++) {//j 指的是空格的个数
                  document.write(" ");
            }

            for (var k = 1; k <= i; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
         document.write("<hr />");
         document.write("<hr />");
    </script>

    <script type="text/javascript">
         for (var i= 1; i <= 5; i++) {
            for (var j = 1; j <= 5-i; j++) {
                  document.write(" ");
            }

            for (var k = 1; k <= i*3-2; k++) {//i*3-2越大，三角形越宽
               document.write("*");
            }
            document.write("<br />");
         }
         document.write("<hr />");
         document.write("<hr />");
    </script>

等腰三角形

菱形

 <script type="text/javascript">
            for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= (5-i); j++) {
                  document.write(" ");
            }

            for (var k = 1; k <= i*2-1; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
         for (var i = 1; i <= 4; i++) {
            for (var j = 1; j <= i; j++) {
                  document.write(" ");
            }
            for (var k = 1; k <= (4-i)*2+1; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
            document.write("<hr />");
         document.write("<hr />");
    </script>


    <!--<div style="text-indent:0.5em">-->
         <script type="text/javascript">
         for (var i = 1; i <= 5; i++) {
            for (var j = 1; j<= (5-i); j++) { //j 指的是空格的个数
//                document.write(" ");
                  document.write(j);
            }

            for (var k= 1; k <= i*2-1; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
         for (var i = 1; i<= 4; i++) {
            for (var j = 1; j<= i; j++) {
                  document.write(" ");
            }
            for (var k = 1;k <= (4-i)*2+1; k++) {
               document.write("*");
            }
            document.write("<br />");
         }
            document.write("<hr />");
            document.write("<hr />");
      </script>
    <!--</div>-->

菱形

99乘法表

 <script type="text/javascript">
         for(var n=1;n<=9;n++) {  //控制行
              for (var m = 1; m <= n ; m++) {  //控制列
                  var b = m * n;
                  document.write(m + "x" + n + "=" + b + " ");
              }

              document.write('<br/>');
              document.write('<br/>');//为了增加行与行的间距
          }

           document.write("<hr />");//增加一个分割线
    </script>