如何修改JS代码实现接收数字输入输出指定星号前缀数字对称图案

核心调整点 #

• 将原前缀输出的空格替换为星号*
• 调整数字打印逻辑：非中间峰值行，重复输出一次当前行最大值，匹配目标图案的对称规则
• 优化循环计数，适配目标图案的行长度规则

完整可运行代码 #

JavaScript 部分 #

function selectNo() {
  // 清空之前的输出，避免重复打印
  document.body.querySelectorAll('br').forEach(el => el.remove());
  const selectedNo = Number(document.getElementById("select-number").value);
  if (isNaN(selectedNo) || selectedNo < 1) return;

  // 打印上半部分（含中间峰值行）
  for (let i = 1; i <= selectedNo; i++) {
    // 输出前缀星号
    for (let l = 0; l < selectedNo - i + 1; l++) {
      document.write("*");
    }
    // 输出递增数字
    for (let j = 1; j <= i; j++) {
      document.write(" " + j);
    }
    // 输出递减数字，非峰值行多打一次当前最大值
    const startK = i < selectedNo ? i : i - 1;
    for (let k = startK; k >= 1; k--) {
      document.write(" " + k);
    }
    document.write("<br>");
  }

  // 打印下半部分
  for (let i = selectedNo - 1; i >= 1; i--) {
    // 输出前缀星号
    for (let l = 0; l < selectedNo - i + 1; l++) {
      document.write("*");
    }
    // 输出递增数字
    for (let j = 1; j <= i; j++) {
      document.write(" " + j);
    }
    // 输出递减数字，非最后一行多打一次当前最大值
    const startK = i > 1 ? i : i - 1;
    for (let k = startK; k >= 1; k--) {
      document.write(" " + k);
    }
    document.write("<br>");
  }
}

HTML 部分 #

<input type="number" id="select-number" placeholder="Select your number" min="1">
<button onclick="selectNo()">Print the pattern</button>

调整说明 #

1. 前缀替换：原输出空格的逻辑直接替换为输出*，匹配目标图案的左侧星号样式
2. 数字逻辑优化：新增了最大值重复打印的判断，上半部分除了中间峰值行，其余行的最大值会多输出一次，完全匹配给出的目标图案数字对称规则
3. 新增输入校验：避免非数字、小于1的输入导致的异常
4. 新增清空逻辑：多次点击按钮不会重复叠加输出内容

内容的提问来源于stack exchange，提问作者cicikiki