JavaScript页面打印倒三角形案例源码

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

训练要点

(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>

 

    温馨提示:本文最后更新于2024-06-04 11:03:08,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞8赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片

      暂无评论内容