JS实现杨辉三角

最新推荐文章于 2025-03-20 16:57:36 发布

爱长发的短发小二哥

最新推荐文章于 2025-03-20 16:57:36 发布

阅读量1k

点赞数 3

文章标签： js javascript 前端算法 es6

本文链接：https://blog.youkuaiyun.com/John_jian_yo/article/details/106944600

版权

本文展示了一段JavaScript代码，用于生成和显示杨辉三角的图形效果，无需多余解释，直接通过代码理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说直接代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        bttton{
            background: #ccc;
            padding: 5px;
            border-radius: 3px;
            margin-left: 10px;
        }
        input{
            padding: 5px;
        }
        #content{
            text-align: center;
        }
    </style>
</head>
<body>
<input type="text" id="input" placeholder="请输入幂数"><bttton onclick="fnPrint();">确定</bttton>
<div id="content"></div>
<script>
    const printObj = {
        init:function () {
            let n = document.getElementById('input').value
            document.getElementById('content').innerHTML = '';
            printObj.arrFn(n)
        },
        arrFn:function (n) {
            let arr = new Array();
            let _this = this;
            fnLoop(arr);
            function fnLoop(ar){
                if(ar.length>=n) return;
                let newArr = [];
                newArr[0] = 1;
                newArr[ar.length] = 1;
                for(let k=0;k<ar.length-1;k++){
                    newArr[k+1]=(ar[k]+ar[k+1])
                }
                _this.fnAppendto(newArr);
                fnLoop(newArr);
            }
        },
        fnAppendto:function (ra) {
            let p = document.createElement('p');
            ra.map(item => {
                let span = document.createElement('span');
                span.style = 'padding:4px 18px;display:inline-block;text-align:center;';
                span.innerHTML = item ;
                p.appendChild(span);
            })
            document.getElementById('content').appendChild(p);
        }
    }
    function fnPrint(){
        printObj.init();
    }


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

其实看看代码就可以的，也没啥多余的解释了

效果图：