利用js实现等腰三角形

2024年3月27日 303次阅读 来源: dawdler_Bo

等腰三角形

主要是利用js中的for循环考验对for循环的灵活运用
还有就是利用空格来调*位置，来实现等腰三角形的排列。

 for (var h = 9 - 1; h >= i; h--) {
        //打印等腰三角形每行前的空格数(大循环内的第一个循环)
            document.write(" ");
        }

具体的解释在代码中

效果图：

图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>等腰三角形</title>
    <style>
        div{
            padding-left:500px;
        }
    </style>
</head>

<body>
    <script>
        document.write("<div>")
        for (var i = 1; i <= 9; i++) {
            //外循环控制等腰三角形的行数(大循环)9可以更换外任何数
            for (var h = 9 - 1; h >= i; h--) {
            //打印等腰三角形每行前的空格数(大循环内的第一个循环)
                document.write("&nbsp;");
            }
            for (var j = 1; j <= 2 * i - 1; j++) {
            //控制每行*的个数(大循环内的第二个循环) 
                document.write("*")
            }
            document.write('<br/>')
        }
        document.write("</div>")
        
        document.write('<hr/>')
        document.write("<div>")

        for (var i = 9; i >= 1; i--) {
            //外循环控制等腰三角形的行数(大循环)9可以更换外任何数
            for (var h =1; h <=9- i; h++) {
            //打印等腰三角形每行前的空格数(大循环内的第一个循环)
                document.write("&nbsp;");
            }
            for (var j = 1; j <= 2*i-1; j++) {
            //控制每行*的个数(大循环内的第二个循环) 
                document.write("*")
            }
            document.write('<br/>')
        }
        document.write("</div>")
    </script>
</body>

</html>

看懂的点个赞呗

    原文作者：dawdler_Bo
    原文地址: https://segmentfault.com/a/1190000016114597
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞