js---用*打印三角形，正方形，长方形，菱形

用js打印这些图形，其实就是循环的嵌套

1、用*打印一个10x10正方形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i = 1;i<=10;i++){
    
    
            //i表示一行，表示打印10行*
            for(var j = 1;j<=10;j++){
    
    
            //j表示一列，表示打印10列*
                document.write("* &nbsp;&nbsp")
                //这个&nbsp; 英文空格符的使用为了更美观；
            }
            document.write("<br>")
        }
    </script>
</body>
</html>

在这里插入图片描述

2、用*打印一个10x5长方形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i = 1;i<=10;i++){
    
    
            //打印10行的*
            for(var j = 1;j<=5;j++){
    
    
             //打印10行的*
                document.write("* &nbsp;&nbsp")
            }
            document.write("<br>")
        }
    </script>
</body>
</html>

在这里插入图片描述

3、用*打印一个等腰三角形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            font-family: Courier, monospace;
        }
    </style>
    //这里换个字体是为了美观，使其使*字体大小一致
</head>
<body>
    <script>
        for(var a =1;a<6;a++){
    
    
        //a代表行；
            for(var b = 1;b<6-a;b++){
    
    
            //b表示在哪里运用空格;
                document.write("&nbsp;");
            }
            for(var c = 1;c<=2*a-1;c++){
    
    
            //d表示打印多少个*
                    document.write("*");
                }
            document.write("<br>");
        }
    </script>
</body>
</html>

在这里插入图片描述

4、用*打印一个菱形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            font-family: Courier, monospace;
        }
    </style>
</head>
<body>
    <script>
        for(var a =1;a<6;a++){
    
    
            for(var b = 1;b<6-a;b++){
    
    
                document.write("&nbsp;");
            }
            for(var c = 1;c<=2*a-1;c++){
    
    
                    document.write("*");
                }
            document.write("<br>");
        }
        // document.write("<br>");
        for(var d = 1;d<5;d++){
    
    
            for(var e=1;e<=d;e++){
    
    
                document.write("&nbsp;");
            }
            for(var f = 1;f<=(5-d)*2-1;f++){
    
    
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</body>
</html>

在这里插入图片描述

其实做这些图形的原理主要是循环的嵌套的使用；

如有不足，请多指导。

扫描二维码关注公众号，回复： 12406930 查看本文章

js---用*打印三角形，正方形，长方形，菱形

猜你喜欢