如何将已生成的帕斯卡三角数组按行或三角展示，并限制用户可输入的行数

1. 核心修改点说明 #

• 输入范围限制：通过HTML输入框原生属性+JS二次校验实现双重限制，避免非法输入，示例限制可输入行数为1~30，可按需调整数值
• 三角形形态渲染：将生成的二维数组逐行用块级元素包裹，给外层容器设置居中对齐，自动呈现等腰三角形态

2. 完整修改后代码 #

HTML部分 #

<form>
  <!-- 加min、max属性限制输入范围，加required避免空提交 -->
  <input id="user_input" type="number" min="1" max="30" required>
  <input type="button" onclick="myFunc()" value="Submit">
</form>
<!-- 加居中样式和行高，优化三角形态展示效果 -->
<p id="pascaltriangle" style="text-align: center; line-height: 1.8;">Pascal's Triangle</p>

JS部分 #

function pascal(numberOfRows) {
  let pascalsTriangle = new Array(numberOfRows);

  for (let i = 0; i < numberOfRows; i++) {
    let line = new Array(i + 1);
    line[0] = 1;
    line[line.length - 1] = 1;

    for (let n = 1; n < line.length - 1; n++) {
      let previousLine = pascalsTriangle[i - 1];
      line[n] = previousLine[n] + previousLine[n - 1]
    }
    pascalsTriangle[i] = line;
  }
  return pascalsTriangle
}

function myFunc() {
  var input = Number(document.getElementById("user_input").value);
  // JS二次校验输入范围，避免用户修改前端HTML绕过限制
  if (input < 1 || input > 30) {
    alert("请输入1~30范围内的行数");
    return;
  }
  const triangleArr = pascal(input);
  let htmlStr = '';
  // 逐行渲染，每行用div包裹，元素之间用空格分隔
  triangleArr.forEach(line => {
    htmlStr += `<div>${line.join(' ')}</div>`
  })
  document.getElementById("pascaltriangle").innerHTML = htmlStr;
}

扩展优化说明 #

如果需要更规整的等腰三角效果，可以给每行前后添加对应数量的空格，或者给每个数字设置固定宽度：将${line.join(' ')}替换为${' '.repeat(30 - line.length) + line.join('  ')}，调整数值即可适配不同的展示需求。

内容的提问来源于stack exchange，提问作者John Lorenz Inocentes