在HTML中显示循环的JavaScript

我试图使用包含for循环的JavaScript函数在我的网页上显示倒计时。我不确定该怎么称呼它。
它应该在我的页面中显示如下内容：

计数：19
计数：18
计数：17
计数：16
计数：15
... 等等

到目前为止，我只能看到“计数：19”。在另一个不同的变体中，我显示了整个计数，但一旦单击按钮，我的页面就会消失（变为白色），计数就会显示出来。页面上有更多的HTML和CSS，但我删掉了不相关的部分

有人能告诉我我做错了什么吗

谢谢大家!！这是我的密码：

用于循环倒计时（）的函数{ 对于（变量i=0；i<20；i++）{ document.getElementById（“count”）.innerHTML=“count:”+i+“
”； } }

倒计时
倒计时页
单击下面的按钮进行倒计时
使用for循环倒计时1

只有19个出现的原因是您的计数器

 for (var i = 0; i < 20; i++)

此外，每次都要创建一个新的

p

标记

var para = document.createElement("p");
var node = document.createTextNode("Count: " + i);
para.appendChild(node);

用于循环倒计时（）的函数{ 对于（变量i=19；i>0；i--）{ var para=document.createElement（“p”）； var节点=document.createTextNode（“计数：+i”）； 子节点（节点）段； 文件.正文.附件（第6段）； } }

倒计时
倒计时页
单击下面的按钮进行倒计时
使用for循环倒计时1

您可以使用

document.getElementById("count").innerHTML += "count: " + i + "<br>";

document.getElementById（“count”）.innerHTML+=“count:”+i+“
”；

而不是

document.getElementById("count").innerHTML = "count: " + i + "<br>";

document.getElementById（“count”）.innerHTML=“count:”+i+“
”；

这样，您就不会每次迭代都覆盖innerHTML属性

---

同时，如果你正在计算，请使用

i--

你需要使用setinterval函数在每秒钟后调用你的函数

var i = 0
setInterval(function ()
 {
  for (i = 0; i < 20; i++) {
    document.getElementById("count").innerHTML + = "count: " + i + "<br>";
  }
},1000)

var i=0
setInterval（函数（）
{
对于（i=0；i<20；i++）{
document.getElementById（“count”）.innerHTML+=“count:”+i+“
”；
}
},1000)

---

我还没有测试代码，但一旦您的函数正确，setinterval函数将确保它每秒钟运行一次，尝试修改代码的这一行

document.getElementById("count").innerHTML = "count: " + i + "<br>";

document.getElementById（“count”）.innerHTML=“count:”+i+“
”；

…看起来像这样

document.getElementById("count").innerHTML += "count: " + i + "<br>";

document.getElementById（“count”）.innerHTML+=“count:”+i+“
”；

您需要使用

setInterval

，同时去掉

for

循环。设置一个计数器，每次

setInterval

调用时递增计数器，然后在计数器过高时终止间隔

如果要从20倒计时到0，则需要使用

i--

而不是使用

i++

进行计数

<header>
  <h1>Count Down Page</h1>
</header>
<h2>Click on the button below to do a count down</h2>
<button id="timerBtn">count down 1 using for loop</button>
<p id="count"></p>

document.getElementById("timerBtn").addEventListener("click", function() {
  var i = 20;
  var interval = setInterval(function(){
    i--;
    document.getElementById("count").innerHTML += "count: " + i + "<br>";
    if (i == 0)
    {
      clearInterval(interval)
    }
  }, 250)
})

---

JSFiddle:

您一直在覆盖“count”元素的值，您需要添加字符串。这与我的答案完全相同：）哦，是的，没有看到：pClose，但这将每秒运行for循环，永远不会结束。是的，但是，如果需要，可以使用stop interval，或者根据问题使用变量从不调用setinterval。就像你所做的：）我忘了提到这是一个家庭作业，它要求我使用for循环。如果你不需要延迟，那么这确实简化了事情。我马上编辑。

<header>
  <h1>Count Down Page</h1>
</header>
<h2>Click on the button below to do a count down</h2>
<button id="timerBtn">count down 1 using for loop</button>
<p id="count"></p>

document.getElementById("timerBtn").addEventListener("click", function() {
  var i = 20;
  var interval = setInterval(function(){
    i--;
    document.getElementById("count").innerHTML += "count: " + i + "<br>";
    if (i == 0)
    {
      clearInterval(interval)
    }
  }, 250)
})

document.getElementById("timerBtn").addEventListener("click", function() {
  for (var i = 20; i > 0; i--) //Take note of this line
  {
    document.getElementById("count").innerHTML += "count: " + i + "<br>";
  }
})