显示每次循环运行的变量值，而不仅仅是最终结果

Question

我正试图在HTML中显示从10开始的倒计时。

这来自一个从10开始递减的for循环。

我遇到的问题是，由于循环倒计时并停止在0，所以我显示的值是最终值，而不是打印所有值(如果有意义的话(！

如何在HTML中显示所有这些？

代码：

let countdown = 'Countdown 10';
for (let i = 10; i >= 0; i--) {
if (i === 10) {
countdown = 'Countdown 10';
} else if (i === 0) {
countdown = 'Blast off!';
} else { 
countdown = i;
}
console.log(countdown);
};

let output = document.querySelector('.output');
output.innerHTML = '';
const para = document.createElement('p');
para.textContent = countdown;
output.appendChild(para);

我相信我可以用para.textContent做点什么，比如把它放到循环中。但我不知道怎么做。

Answer 1

您应该将值分配给HTML元素，并将该元素附加到循环块内的文档中，并使用延迟

let delay = 300;
let count = 10;
const output = document.querySelector('.output');
const para = document.createElement('p');
output.appendChild(para);
for (let i = count; i >= 0; i--) {
let countdown = i;
if (i === 10) {
countdown = 'Countdown 10';
} else if (i === 0) {
countdown = 'Blast off!';
}
setTimeout(()=>{
para.textContent = countdown;
}, (count - i) * delay)
};

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

Answer 2

您只需要先设置元素，这样您就可以在一路上对它们进行写入。使用for循环会循环得很快，你不会看到倒计时发生，所以我还展示了一个使用setInterval的替代版本，它允许你控制每次计数之间的时间。

let countdown = 'Countdown 10';
let output = document.querySelector('.output');
output.innerHTML = '';
const para = document.createElement('p');
output.appendChild(para);

const para2 = document.createElement('p');
output.appendChild(para2);
for (let i = 10; i >= 0; i--) {
if (i === 10) {
countdown = 'Countdown 10';
} else if (i === 0) {
countdown = 'Blast off!';
} else {
countdown = i;
}
para.textContent = countdown;
//console.log(countdown);
};
para2.textContent = 'Countdown 10'
let i = 9,
intv = setInterval(() => {
if (i < 0) return clearInterval(intv);
let countdown = i === 0 ? 'Blast off!' : i
para2.textContent = countdown;
i--
}, 1000)

<div class='output'>
</div>