如何在HTML中展示for循环倒计时每一步值而非仅最终结果

你原有代码的问题有两个：

1. 同步执行的for循环运行速度极快，浏览器不会在循环过程中刷新页面渲染，只会等所有JS逻辑执行完成后一次性渲染最终结果
2. 你给p标签赋值、插入页面的逻辑写在循环结束后，此时countdown变量已经被循环覆盖为最后一次的Blast off!，自然只能看到最终结果

你可以根据自己的需求选择对应实现方式：

方案1：页面直接列出所有倒计时过程值 #

如果不需要动态跳动效果，只是要把10到0的所有过程内容全部展示在页面，直接把创建元素、赋值的逻辑放到for循环内部即可，代码如下：

let output = document.querySelector('.output');
output.innerHTML = '';

for (let i = 10; i >= 0; i--) {
    let countdown;
    if (i === 10) {
        countdown = 'Countdown 10';
    } else if (i === 0) {
        countdown = 'Blast off!';
    } else { 
        countdown = i;
    }
    console.log(countdown);
    // 每次循环都创建一个新p标签插入页面
    const para = document.createElement('p');
    para.textContent = countdown;
    output.appendChild(para);
};

方案2：实现每秒更新一次的动态倒计时效果 #

如果要实现真实的倒计时跳动效果，不能用同步for循环，需要用setInterval定时器控制更新频率，代码如下：

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

let i = 10;
// 赋值初始值
para.textContent = 'Countdown 10';

const timer = setInterval(() => {
    i--;
    if (i === 0) {
        para.textContent = 'Blast off!';
        clearInterval(timer); // 倒计时结束清除定时器避免内存泄漏
    } else {
        para.textContent = i;
    }
    console.log(para.textContent);
}, 1000); // 1000毫秒即1秒更新一次

内容的提问来源于stack exchange，提问作者Sam Jefferies