优秀的编程知识分享平台

网站首页 > 技术文章 正文

来打印个杨辉三角玩玩（杨辉三角干什么用的）

nanyue 2024-09-15 23:26:53 技术文章 3 ℃

一、前几节课一直都是复制粘贴的方式在 console 中运行程序，在程序改来改去的时候，复制过来复制过去挺麻烦的，今天玩这个改动会比较多，所以咱们换种方式，把 javaScript 代码写到 html 中，直接在浏览器打开，然后改完程序，刷新就行了。

1、打开 vscode ，File -> New File.


2、将文档类型设置成 html


3、打个感叹号，并按 Tab 键


会自动生成一个简单的html模板

4、然后在 <body></body> 之前加上 以下内容，并保存到桌面，命名为“杨辉三角.html”：

5、找到桌面上的“杨辉三角”，用鼠标右键->打开方式-> Google Chrome

会弹出 chrome 浏览器，并在页面上显示一个1就对了

然后，我们切回到 vscode 把 document.write(1) 改成 document.write(2)并 control + s 保存;

再倒回来浏览器刷新一下看看会发现，页面上已经变成2了。


二、先了解一下，什么是杨辉三角

1、第一行是一个1；

2、第二行开始，每行的行首和行尾都是1

3、从第三行开始看出规律来了，中间的2就是第二行的两个1的和

4、从第四行来看，第2个数字“3”是第三行的第1和第2个数的和，第3个数字“3”，是第三行的第2和第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>
</head>
<body>
    <script>
        /*
        杨辉三角就是下面这么一个东西：
            1
           1 1
          1 2 1
         1 3 3 1
        1 4 6 4 1
        ======================
        1、第一行是一个1；
        2、第二行开始，每行的行首和行尾都是1
        3、从第三行开始看出规律来了，中间的2就是第二行的两个1的和
        4、从第四行来看，第2个数字“3”是第三行的第1和第2个数的和，第3个数字“3”，是第三行的第2和第3个数字的和。
        规律找到了，我们开始来写程序吧。    
        */
        
        function ShowYangHuiTriangle(n) {       //n 表示行数
            //因为前一行结果会影响后一行,所以打印后一行的时候，要知道前一行是啥，而前一行的空格数，又和后一行相关
            //所以我们还是先把数据生成了再来打印吧
            var data = [];      //java script 不能直接定义二维数组，只能先定义一个一维数组，再往二维数组里插数组
            //第1行：data[0] = [1]
            //第2行：data[1] = [1,1]
            //第3行：data[2] = [1,2,1]
            //第4行: data[3] = [1,3,3,1]
            //第5行: data[4] = [1,4,6,4,1]

            //第一行虽然就只有一个数字，但它也应该是个数组
            data.push([1]);

            //从第二行开始，到第 n 行，这种带得有（从 xxx 到 xxx 的，一般就是 for 循环了）
            //这里要注意，数组的下标是从 0 开始的
            //假如： data = [1,2,3,4,5] 数组 
            //那么  data[0] = 1; data[1] = 2; data[2] = 3; data[3] = 4; data[4] = 5; 
            //所以从第 2 行到 第 n 行，应该是  1 <= row < n
            for (var r=1;r<n; r++) {    //r 表示当前是第几行
                var row = [];           //生成新行

                row.push(1);            //数组的 push 方法是往数组中按顺序添加元素，这里表示每行的行首都是1 

                //第一行是一个元素，第二行是两个元素，第三行是三个元素，所以第 r 行
                //就是 r 个元素，但需要注意的是，这里的 r 是行标
                //第一行的时候 r = 0， 第二行的时候，r = 1, 第 n 行的时候 r = n - 1;
                //下标为r的行，它是第 r+1 行，它的元素范围是从  0 < 元素个数 < r + 1;  //每行的全部元素
                //还要去掉行首和行尾所以需要计算的范围就是      1 < 元素个数 < r       //去掉了行首和行尾的全部元素
                for (var c=1;c<r;c++) { 
                    row.push(data[r-1][c-1] + data[r-1][c]);        
                    //data[r] 是当前行所以 data[r-1] 是前一行
                    //当前行的第2个元素 = 前一行的第1个元素 + 前一行的第2个元素
                    //举例：第3行的第2个数字， data[2][1]  = 2 ，它等于 第2行的第1个数字和第2个数字和   = data[1][0] + data[1][1]
                }

                row.push(1);            //这里表示每行的行尾也是1

                data.push(row);         //把新行加入到 data 中
            }

            //打印所有行
            for (var r in data) {               //r 为当前行数           
                //每一行的空格数 = n - r 当前行数
                for(var c=0;c<n-r;c++) document.write(" ");
                document.write(data[r].join(" "));  //每一行的所有数字用空格格开
                document.write("\n");               //打完一行要换行
            }
        }

        document.write("<pre>");                //保持原样打印开始
        ShowYangHuiTriangle(5);                 // 我们希望想打几行就打几行
        document.write("</pre>");               //保持原样打印结束
    </script>
</body>
</html>

当行数很多的时候，格式会乱，比如说打印10行


Tags：

猜你喜欢

最近发表
标签列表