JavaScript页面打印倒三角形案例源码-QQ沐编程

训练要点

（1）掌握for循环的应用。

（2）掌握if语句的应用。

需求说明

在页面提示用户输入一个整数，当用户输入的值大于5时，例如，输入6，在页面输出如图所示的倒三角形；当用户输入的值小于或等于5时，例如，输入4，在页面输出如图所示的倒正三角形。

图片[1]-JavaScript页面打印倒三角形案例源码-QQ沐编程

实现思路及步骤

（1）使用if语句判断输出倒三角形还是倒正三角形。

(2)使用二重循环输出三角形,用外层循环变量控制行,内层循环变量控制列,每行*号输出后换行。

实现源代码

<!DOCTYPE html>
<html>
<head>
  <title>打印倒三角形</title>
</head>
<body>
  <label for="number">请输入一个数字：</label>
  <input type="number" id="number" name="number">
  <button onclick="printTriangle()">打印倒三角形</button>
  <br>
  <pre id="result"></pre>

  <script>
    function printTriangle() {
      var number = document.getElementById("number").value; // 获取输入的数字
      var result = document.getElementById("result");

      if (number >= 5) {
        // 打印倒三角形
        var triangle = '';
        for (var i = number; i >= 1; i--) {
          for (var j = 1; j <= number - i; j++) {
            triangle += ' ';
          }
          for (var k = 1; k <= 2 * i - 1; k++) {
            triangle += '*';
          }
          triangle += '\n';
        }
        result.innerText = triangle;
      } else {
        // 打印倒正三角形
        var triangle = '';
        for (var i = number; i >= 1; i--) {
          for (var j = 1; j <= number - i; j++) {
            triangle += ' ';
          }
          for (var k = 1; k <= 2 * i - 1; k++) {
            triangle += '*';
          }
          triangle += '\n';
        }
        
        // 打印倒反三角形
        for (var i = 2; i <= number; i++) {
          for (var j = 1; j <= number - i; j++) {
            triangle += ' ';
          }
          for (var k = 1; k <= 2 * i - 1; k++) {
            triangle += '*';
          }
          triangle += '\n';
        }

        result.innerText = triangle;
      }
    }
  </script>
</body>
</html>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END