在 HTML 中显示 JavaScript for 循环
[英]Displaying JavaScript for loop in HTML
问题描述
我正在尝试使用包含 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"> </p> </body> </html>
5 个解决方案
解决方案1
1 2016-10-09 23:36:05
您需要使用setInterval ，并一起摆脱for循环。 设置一个计数器，每次setInterval调用都会增加计数器，然后在计数器变得太高后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： 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/
解决方案2
0 2016-10-09 23:28:23
只出现19的原因是因为你的柜台
for (var i = 0; i < 20; i++)
因此，我们从 0 开始，然后将 1 添加到i直到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"> </p> </body> </html>
解决方案3
0 2016-10-09 23:29:27
您可以使用，
document.getElementById("count").innerHTML += "count: " + i + "<br>";
代替
document.getElementById("count").innerHTML = "count: " + i + "<br>";
这样你就不会在每次迭代时覆盖 innerHTML 属性。
你也在数数，使用i--
解决方案4
0 2016-10-09 23:32:32
您需要使用 setinterval 函数在每秒之后调用您的函数。
var i = 0
setInterval(function ()
{
for (i = 0; i < 20; i++) {
document.getElementById("count").innerHTML + = "count: " + i + "<br>";
}
},1000)
我没有测试过代码，但是一旦你的函数正确，setinterval 函数将确保它每秒运行一次
解决方案5
0 2016-10-09 23:32:45
尝试修改这行代码...
document.getElementById("count").innerHTML = "count: " + i + "<br>";
...看起来像这样
document.getElementById("count").innerHTML += "count: " + i + "<br>";
使用for循环在基本html表中显示来自服务器的json数据，仅javascript，for循环有问题吗？
[英]Displaying json data from server in basic html table using for loop, javascript only, problem with for loop?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.