杨辉三角需要考虑内容

杨辉三角中的各部分数据是如何形成的
打印输出过程中，每行到底需要空多少格，浏览器中直接居中展示即可，如果是文本中该如何显示
未控制单个数字长度时候，展示出来曲线效果如何解决
前几行都是一位数字，出现多位数字时候，未控制数字每个数字长度，出现重叠现象该怎么办

下面代码可直接拷贝到文本文件中，将文本文件后缀修改成.html，在浏览器中打开即可显示效果

使用HTML展示杨辉三角

<html>
    <head>
        <title>杨辉三角</title>
        <style>
            #main {
                text-align: center;
            }
            #dis {
                margin-top: 10px;
                background-color: #a2f2d0;
            }
            .label-v {
                text-align: center;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div>
                <input id="number" type="number" value="1" style="font-weight: bold; height: 30px;" onchange="print();" />
            </div>
            <div id="dis">

            </div>
        </div>
    </body>
    <script>
        function print() {
            document.getElementById('dis').innerText = '';
            var num = document.getElementById("number").value;

            var list = [];
            if (num > 0) {
                var firstRow = [];
                firstRow.push(1);
                list.push(firstRow);
            }

            if (num > 1) {
                var secondRow = [];
                secondRow.push(1, 1);
                list.push(secondRow);
            }

            for (var i = 2; i < num; i++) {
                var currentInts = getInt(list[i - 1], i);
                list.push(currentInts);
            }
            var lastRow = list[list.length - 1];
            var max = lastRow[Math.floor(lastRow.length / 2)];
            var maxLength = (max + '').length;

            for (var i = 0; i < list.length; i++) {
                var rowDiv = document.createElement('div');

                for (var j = 0; j < list[i].length; j++) {
                    var cell = document.createElement('label');
                    cell.innerText = list[i][j];
                    cell.style = "width: " + (10 * maxLength) + "px";
                    cell.className = 'label-v';
                    
                    rowDiv.appendChild(cell);
                    if (j != list[i].length - 1) {
                        rowDiv.appendChild(createSpace());
                    }
                }
                
                document.getElementById('dis').appendChild(rowDiv);
            }
        };

        function createSpace() {
            var spaceDom = document.createElement('label');
            spaceDom.innerText = ' ';
            spaceDom.style = 'text-align: center';
            return spaceDom;
        }
        
        function getInt(pre, current) {
            var currentInts = [];
            currentInts.push(1);
            for (var i = 0; i < current; i++) {
                if (i < pre.length - 1) {
                    var val = pre[i] + pre[i + 1];
                    currentInts.push(val);
                }
                else {
                    currentInts.push(pre[i]);
                }
            }
            return currentInts;
        }
        
        window.onload = print();
    </script>
</html>

526互联

杨辉三角

杨辉三角需要考虑内容