至于是不是全网最详细,不敢说。但是很详细。立志于打造8岁小孩都能听懂的等腰三角形。

首先你需要具备以下知识,for循环,基础运算(加减乘除),javaScript的基础.,年龄大于等于8岁。

 

请耐心看完。中途若不适请耐心看

 

1.首先树立一个正确结果的目标。这里给大家手绘了一个结果。等腰三角形

 

javascript打印三角形自己输入行数 js打印三角形详细解析_for循环

2.分析发现,这东西有3行,第一个行有2个空格,1个点    第二个行有1个空格,3个点   第三行有0个空格 5个点

 

javascript打印三角形自己输入行数 js打印三角形详细解析_javascript_02

3.那对于一行来说,不就是先打印空格,在打印点嘛

每一行内的程序
document.write(空格)
document.write(点)

怎么打印2个或者多个点,那不就是循环嘛。空格也是循环嘛,当然也是啦。

那我们先从空格开始打印,

4.空格分析

通过肉眼观察发现,空格出现的次数为

第一次 2个空格

第二次 1个空格

第三次 0个空格

每一次换行,总共三行。写法是什么呢?

第一个肯定是个大循环3次,打印3行

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_03

第二个是每个大循环里 打印空格

(1).    j<=3是打印3次,那我改成2是不是打印2次

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_04

(2).  改成2次后,每行是不是打印了2个,但我们想要的是第一次打印2个,第二次打印1个,想了一秒钟

2-1=1

2-2=0

2-3=-1

(3).这样不就行了吗,但是却是1 0 -1,很显然,我们不能改成2,要改成3.才可以,于是我们把j<=2改成了j<=3

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_05

(4).因为3刚好符合下面条件

3-1=2

3-2=1

3-3=0

(5).3我们确定了,那么被减数怎么确定。

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_06

我们是几行?

3行对吧。那大循环的i是怎么变化的?

1 ,2 ,3是不是刚好符合

那么把 被减数改成i 不就完成了嘛

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_07

(6).我们打印

javascript打印三角形自己输入行数 js打印三角形详细解析_字符串_08

结果,完成

javascript打印三角形自己输入行数 js打印三角形详细解析_html_09

小总结:注意这2个保持一直,多大的等腰三角形的空格都没有问题,当然也包括等腰梯形等。

javascript打印三角形自己输入行数 js打印三角形详细解析_html_10

 

5.空格没问题了,接下来就是点

javascript打印三角形自己输入行数 js打印三角形详细解析_for循环_11

 

(1).通过肉眼观察,第一次 每一行有1个点,第二次 每一行有3个点 ,第三次 每一行有5个点。

1 3 5 是什么?噢,好像咱们学的那个奇数啊

那奇数怎么用函数表示  ,花了10秒 想了下

2x-1

 

(2).那是不是适用呢,4行,5行的等腰三角形呢?

4行的 点 有多少

1 3 5 7

5行的有多少

1 3 5 7 9

2x-1完全适用

 

(3).2x-1

第一次为1个点.那么x为1

第二次为3个点,那么x为2

第三次为5个点,那么x为3

x为1 ,2 ,3,好熟悉,像大循环中的谁

大循环中的i

 

(4). 代码

javascript打印三角形自己输入行数 js打印三角形详细解析_html_12

空格是&nbsp;

结果

javascript打印三角形自己输入行数 js打印三角形详细解析_javascript_13

nbsp占1个字节.但是一个字符串占2个字节

所以我们写2个nbsp就可以对齐

 

(5).最后总结果

<!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>
        *{margin: 0;padding: 0;border: 0;outline: none;}
    </style>
    <script>

        for(var i=1;i<=3;i++){
            // 打印空格
            for(var j=1;j<=3-i;j++){
                document.write("  ")
            }

            // 打印点
            for(var j=1;j<=2*i-1;j++){
                document.write("1")
            }

            // 打印换行
            document.write("<br/>")
        }


        
    </script>
</head>
<body>
    
</body>
</html>

javascript打印三角形自己输入行数 js打印三角形详细解析_for循环_14