Question

我有一个JavaScript代码可以在HTML Body上打印自动增量计数。 Count从0开始，我使用setInterval函数通过定期自动点击按钮递增它。我需要在它达到10时停止计数。我使用了一个while循环来自动计数功能，但是当打开页面时，它会不断加载而不提供结果。我如何得到正确的结果？

JavaScript的：

var a=0;

function count(){
    a=a+1;
    document.getElementById('p').innerHTML=a;
    return true;
}

while (a!=10)
{
    window.onload = function(){
    var button = document.getElementById('clickButton');
    setInterval(function(){
        button.click();
    },1000);
};
}
document.getElementById('p').innerHTML="Over!";

Answer 1

我的建议如下

＆＃13;

var a=0;
function count(){
    a=a+1;
    if(a<=10) document.getElementById('p').innerHTML=a
}

window.onload = function(){
    var button = document.getElementById('clickButton');
    var interval = setInterval(function(){
        if(a<10){
            button.click();
        }
        else{
            clearInterval(interval);
            document.getElementById('p').innerHTML="Over!"; 
        }
    },1000);
}

＆＃13;

<div id="p"></div>
<button id="clickButton" onclick="count()">button</button>

＆＃13;

Answer 2

您可以使用一个变量作为后续清算的间隔，并且可以在所需值内部进行检查。

然后你需要一个onload事件来启动间隔，如果点击则需要一个事件。

＆＃13;

var a = 0,
    interval;

window.onload = function() {
    var button = document.getElementById('clickButton');
    interval = setInterval(function() {
        button.click();
    }, 1000);
}

function count() {
    document.getElementById('p').innerHTML = ++a;
    if (a > 10) {
        clearInterval(interval);
        document.getElementById('p').innerHTML = "Over!";
    }
}

＆＃13;

<p id="p">--</p>
<button id="clickButton" onclick="count()">button</button>

＆＃13;

Answer 3

您可以在间隔中使用变量，稍后使用clearInterval

将其清除

function buttonAction() {
  var count = 0;
  var idInterval = setInterval(function() {
    let div = document.getElementById("count");
    div.innerHTML+=count;
    count++;
    if (count > 10) {
      clearInterval(idInterval);
    }
  }, 1000);
}

<div id="count">

</div>
<button onClick="buttonAction()">Click me</button>

Answer 4

你过于复杂，你几乎不应该在while循环中使用setInterval。

let a = 0;
const button = document.getElementById('foo');
const interval = setInterval(() => {
  if (a++ < 10) {
    return button.click();
  }
  clearInterval(interval);
}, 1000);

button.addEventListener('click', () => console.log(a));

<button id="foo">
Button
</button>

通过JavaScript增加计数直到达到给定值

4 个答案: