主页 / 问题 / 1601668
Accepted
user654927
Asked:2024-12-05 03:41:29 +0000 UTC2024-12-05 03:41:29 +0000 UTC

使用嵌套循环，您需要打印从 1 到 50 的数字

  • 772

您需要使用嵌套的 for 循环打印五行中的数字才能得到结果：

01 02 03 04 05 06 07 08 09 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50

外循环打印换行符 br 并从 1 运行到 5。嵌套循环绘制从 1 到 10 的数字。我不明白该怎么做？您可能可以为每次迭代编写 if/else，但我认为这不是很正确。

let out10 = document.querySelector('.out-10');
let btn10 = document.querySelector('.b-10');

let cycleT10 = () => {
    for(let i = 1; i <= 5; i++){
        for(let k = 1; k <= 10; k++){
            if(k < 10){
                out10.innerHTML += '0' + String(k) + ' ';
                }
                else{
                    out10.innerHTML += k;
                };
            };
            out10.innerHTML += '<br>'
        };       
    };   
cycleT10();
javascript

2 个回答

  1. Best Answer

    您可以使用内置的padStart字符串方法-​​ 它使用指定的模式将字符串从字符串开头填充到所需的字符数

    const container = document.getElementById('container');

let cycleT10 = () => {
  let appendString = '';
  for (let i = 0; i < 5; i++) {
    for (let j = 1; j <= 10; j++) {
      appendString += `${10 * i + j} `.padStart(3, '0');
    }
    appendString += '<br />'
  }
  container.innerHTML = appendString;
}
cycleT10();
    <div id="container"></div>

    将文本插入 DOM 的逻辑也已更改。文本插入一次，而不是在嵌套循环的每次迭代时插入

    • 2

  2. 他们已经告诉过你了padStart()。所以我只给出一个简单的解决方案 - 在循环期间我们检查下一个数字是否是 10 的倍数if(i % 10 === 0)并添加进位。

    const container = document.querySelector('.container');
for (let i = 1; i <= 50; i++) {
  container.innerHTML += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) {
    container.innerHTML += '<br>';
  }
}
    <div class="container"></div>

    但是，您需要考虑到并非所有字体都同样美观、有用且等宽。因此，您可能需要向块添加样式font-family: monospace。但是您可以更进一步，最初创建一个块<pre></pre>，它实际上是为此目的而发明的，并使代码更加简单，无需任何<br>

    const container = document.querySelector('.container');
for (let i = 1; i <= 50; i++) {
  container.textContent += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) container.textContent += '\n';
}
    <pre class="container"></pre>

    正如您所看到的，我们没有用费用填充标签，而是.innerHTML切换到文本内容.textContent并选择作为换行符\n。

    如果你愿意，你可以走得更远，为了不阻塞不必要的字符:)完全放弃循环for以提高速度while：

    const container = document.querySelector('.container');
let i = 1;
while (i <= 50) {
  container.textContent += i.toString().padStart(2, '0') + ' ';
  if (i % 10 === 0) container.textContent += '\n';
  i++;
}
    <pre class="container"></pre>

    • 1

相关问题