Javascript 中的星形图案答案

【问题标题】：Star Pattern in JavascriptJavascript 中的星形图案
【发布时间】：2020-12-15 09:27:03
【问题描述】：

var i, j;
for (i = 1; i <= 19; i++) {
  for (k = 1; k <= i; k++) {
    document.write("*");

  }
  document.write("<br/>");
}

&lt;div id="output"&gt;&lt;/div&gt;

尝试创建此模式，但不确定如何在第 10 行后减少它的最佳方式：

*
**
***
****
*****
******
*******
********
*********
**********
*********
********
*******
******
*****
****
***
**
*

【问题讨论】：

看到这个，好像是重复的 - stackoverflow.com/questions/28365737/…。
不是从 1-19 循环，而是从 1-10 循环，然后从 9-1 循环？

标签： javascript html loops conditional-statements

【解决方案1】：

首先将循环从 1 增加到 10，然后再进行循环从 9 减少到 1。

const max = 10;

for (let i = 1; i <= max; i++) {
  document.write("*".repeat(i) + "<br/>");
}

for (let i = max - 1; i >= 1; i--) {
  document.write("*".repeat(i) + "<br/>");
}

为了好玩，我添加了一个缓慢增长的例子

let max = 1;

setInterval(() => {
  document.body.textContent = "";

  for (let i = 1; i <= max; i++) {
    document.write("*".repeat(i) + "<br/>");
  }

  for (let i = max - 1; i >= 1; i--) {
    document.write("*".repeat(i) + "<br/>");
  }
  
  max++;
}, 500)

【讨论】：

【解决方案2】：

关于您的代码的一些注释：

你应该避免document.write
您可以使用String#repeat 来复制* 字符，而不是嵌套循环。
要管理下降，您只需检查索引是否超过中点，以及是否打印totalHeight - index + 1数量*；

这是一个基于上述注释的交互式示例。

function printTree(size, dom) {
  if (!(dom instanceof HTMLElement)) dom = document.body; // if the element hasn't been defined get the body element
  dom.innerHTML = ""; // clear any old content of the element
  var half = Math.ceil(size / 2); // get the halfway point to compare (and avoid extra calculations inside loop);
  for (var index = 1; index <= size; index++) {
    dom.appendChild(document.createElement("div")).textContent = "*".repeat(index > half ? size - index + 1 : index);
  }
}

var input = document.querySelector("#num"),
  content = document.querySelector("#content");
input.addEventListener("input", refresh);
refresh();

function refresh() {
  printTree(+input.value, content);
}

<input type="number" id="num" value="5" />
<div id="content"></div>

【讨论】：

感谢您的帮助！我是新手，非常感谢您的建议