JavaScript 实现金字塔图案绘制：使用 prompt() 输入层数并校验

使用 JavaScript 代码绘制金字塔图案

本教程将使用 JavaScript 代码实现一个简单的金字塔图案绘制功能，并使用 prompt() 函数获取用户输入的层数，同时进行输入校验，确保用户输入的是数字。

代码实现:

var num = prompt('请输入金字塔的层数：');
if (isNaN(num)) {
  alert('输入错误！');
} else {
  var str = '';
  for (var i = 1; i <= num; i++) {
    // 第一个小循环
    for (var j = 1; j <= num - i; j++) {
      str += '<span>&nbsp</span>';
    }
    // 第二个小循环
    for (var k = 1; k <= 2 * i - 1; k++) {
      str += '<span>*</span>';
    }
    // 第三个小循环
    for (var j = 1; j <= num - i; j++) {
      str += '<span>&nbsp</span>';
    }
    str += '<br>';
  }
  document.write(str);
}

代码解释:

1. 获取用户输入: 使用 prompt() 函数获取用户输入的层数，并存储在 num 变量中。
2. 输入校验: 使用 isNaN() 函数判断 num 变量是否为数字，如果不是数字，则弹出错误提示。
3. 字符串拼接: 使用双层循环和字符串拼接来构建金字塔图案。
   • 外层循环: 控制金字塔的行数，即层数。
   • 内层循环: 控制每行中星号和空格的数量。
4. 拼接结果: 将拼接后的字符串存储在 str 变量中，并使用 document.write() 函数将其输出到页面上。

代码逻辑:

• 外层循环控制金字塔的行数，循环次数为用户输入的层数。
• 内层循环控制每行中星号和空格的数量，通过改变循环次数来控制星号和空格的排列方式。
  • 第一个小循环拼接空格，数量为层数减去当前行数，实现每行左侧的空格数量逐渐减少。
  • 第二个小循环拼接星号，数量为当前行数的两倍减 1，实现每行星号的数量逐渐增加。
  • 第三个小循环与第一个小循环相同，实现每行右侧的空格数量逐渐减少。
• 每次循环结束后，拼接换行符 <br>，实现下一行。

通过以上步骤，即可使用 JavaScript 代码绘制出金字塔图案，并根据用户输入的层数来调整图案的形状。