javascript - 如何进行降序 for 循环倒计时，在每次迭代中创建具有给定数字的 <p> 元素？

Question

这可能看起来非常基础。但是我正在为这个简单的 for 循环创建而苦苦挣扎，因为在任何循环迭代中都没有创建 p 元素。我不知道如何在我的 div 元素 (.output) 中显示新创建的 p 元素。

它应该在每次迭代时为我的 div 创建一个 p 元素，显示 i 的当前值。当它是 10 时，它应该说“倒计时已经开始”，最后是“倒计时结束!”。这是一个小示例(省略了其余的 html):

<div class="output"></div>

<script>
let output = document.querySelector(".output");
output.innerHTML = '';
countBegin= "Countdown has started";
countEnd  = "Countdown has ended";
countBet  = "Countdown at ";

function countD() {
for (let i = 10; i<= 0; i--) {
    var para = document.createElement("p"); 
    if (i === 10) {
        para.textContent = countBegin + i;

    } else if (i === 0) {
        para.textContent = countEnd;

    } else {
        para.textContent = countBet + i;
    }
    output.appendChild(para);
}

}

countD();

</script>
</body>

我希望在浏览器窗口中至少看到一行输出，但遗憾的是没有。

Answer 1

因为你从 10 循环到 0，所以循环条件应该是 i >= 0:

let output = document.querySelector(".output");

output.innerHTML = '';
countBegin = "Countdown has started";
countEnd = "Countdown has ended";
countBet = "Countdown at ";

function countD() {
  for (let i = 10; i >= 0; i--) {
    var para = document.createElement("p");
    if (i === 10) {
      para.textContent = countBegin;
    } else if (i === 0) {
      para.textContent = countEnd;
    } else {
      para.textContent = countBet + i;
    }
    output.appendChild(para);
  }
}

countD();

<div class="output"></div>