如何为 JavaScript 创建这种模式？答案

【问题标题】：How to create this pattern for JavaScript?如何为 JavaScript 创建这种模式？
【发布时间】：2021-09-08 10:03:30
【问题描述】：

我不知道如何使 html 模式看起来像这样：

....1

...2.

..3..

.4...

5....

当我习惯了这段代码时，结果是这样的：

....1.

我怎样才能使它的数字变大，当你向下行时向左移动一个位置？

function question4() {
  let input = +document.getElementById('q4').value;
  let row = '';
  let output = '';
  if (input >= 100) {
    document.getElementById('output4').innerHTML = 'Error';
  } else {
    for (let i = 1; i <= input; i++) {
      for (let j = input; row.length <= input; j--) {
        if (j === i) {
          row += j;
        } else {
          row += '.'
        }
      }
      output += '<p>' + row + '</p>'
    }
    document.getElementById('output4').innerHTML = output;
  }
}

question4();

<div id="output4"></div>
<input id="q4" value="5">

【问题讨论】：

每次通过第一个for循环，您都需要重置row=""。
这可能会有所帮助codepen

标签： javascript loops for-loop while-loop

【解决方案1】：

有工作代码

function question4() {
  const outputEl = document.getElementById('output4');
  const inputEl = document.getElementById('q4');
  const value = +inputEl.value;
  
  if (value >= 100) outputEl.innerHTML = 'ERROR';
  else {
    let output = '';
    for(let i = 1; i <= value; i++) {
      let row = '';
      
      for(let y = value; y >= 1; y--) {
        if(y === i) row += i;
        else row += '.';
      }
      
      output += '<p>' + row + '</p>';
    }
    
    outputEl.innerHTML = output;
  }
}

question4();

<div id="output4"></div>
<input id="q4" value="10">

【讨论】：