話不多說直接代碼
<!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>
其實看看代碼就可以的，也沒啥多餘的解釋了
效果圖：
