编辑：如果不需要延迟，则需要for循环：

Question

我正在尝试使用包含for循环的JavaScript函数在我的网页上显示倒计时。我不确定正确的方式是什么。
它应该在我的页面中显示如下内容：

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

到目前为止，我只能出现“数：19”。在一个不同的变体上，我得到了整个计数，但是一旦按下按钮，我的页面就会消失（变白）并显示计数。页面上有更多的HTML和CSS，但我已经删除了不相关的部分。

有人能告诉我我做错了吗？

谢谢！这是我的代码：

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

<html lang="en">

<head>
  <title>Count Down</title>

</head>

<body>
  <header>
    <h1>Count Down Page</h1>
  </header>
  <h2>Click on the button below to do a count down</h2>
  <button onclick="forLoopCountDown()">count down 1 using for loop</button>
  <p id="count">&nbsp;</p>
</body>

</html>

Answer 1

您需要使用setInterval，并一起摆脱for循环。设置一个计数器，每隔setInterval次调用递增计数器，然后在计数器变得过高后终止该间隔。

如果您想将DOWN从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：https://jsfiddle.net/e6p9u0ks/1/

编辑：如果不需要延迟，则需要for循环：

想法是在i = 20启动计数器，然后倒数到零。使用上面的HTML，但用以下内容替换JS：

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>";
  }
})

JSFiddle：https://jsfiddle.net/e6p9u0ks/2/

Answer 2

只有19出现的原因是因为你的计数器

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

所以，我们从0开始，在i之前添加1到i == 19，每次循环运行时，你都会用新值覆盖<p id="count"> </p>，所以你查看最终值，即count: 19

所以，你想要增加，而不是增加

 for (var i = 19; i >= 0; i--)

此外，您希望每次都创建一个新的p标记。

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

function forLoopCountDown() {
  for (var i = 19; i > 0; i--) {
    var para = document.createElement("p");
    var node = document.createTextNode("Count: " + i);
    para.appendChild(node);
    document.body.appendChild(para);
  }
}

<html lang="en">

<head>
  <title>Count Down</title>

</head>

<body>
  <header>
    <h1>Count Down Page</h1>
  </header>
  <h2>Click on the button below to do a count down</h2>
  <button onclick="forLoopCountDown()">count down 1 using for loop</button>
  <p id="count">&nbsp;</p>
</body>

</html>

Answer 3

你可以使用，

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

而不是

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

这样你就不会在每次迭代时都覆盖innerHTML属性。

你也在计算，使用i--

Answer 4

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

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

我没有测试过代码，但是一旦你的函数正确，setinterval函数将确保它在每秒后运行

Answer 5

尝试修改代码的这一行......

$updated_text = preg_replace('/(<a[^>]*>)\s*([^<]*)\s*<\/a>/', '$1\n\t$2</a>', $text);

......看起来像这样

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

在HTML

5 个答案:

编辑：如果不需要延迟，则需要for循环：