Question

我目前正在制作一个答题器游戏，我想知道如何制作一个按钮，当我单击它时，数字会随着时间间隔缓慢上升。我真的不知道该怎么做间隔，我试过做循环，但是循环是即时的，没有间隔。

var number = 0;

function increase() {
  for (var i = 0; i < 1; i++) {
    document.getElementById("number").innerHTML = number += 1
  }
}

<button onclick="increase()">
    by 1
  </button>
<div>
  number:
  <div id="number">
    0
  </div>
</div>

有人可以将其转变为自动答题器吗？如上所述，我只想单击一次按钮，并使变量“数字”的值上升。谢谢。

Answer 1

您可以使用setInterval（）设置时间间隔；

var number = 0;

function increase() {
    for (var i = 0; i < 1; i++) {
        document.getElementById("number").innerHTML = number += 1
    }
}

setInterval(increase, 1000);

这应该每秒增加一个数字。

如果您想停止它，可以说：

var interval = setInterval(increase, 1000);

clearInterval(interval);

Answer 2

var number = 0;
function increase () {
    number++;
    document.getElementById('number').innerHTML = number;
}

尝试一下。我相信问题是，您实际上并没有增加变量'number'。相反，您要做的是将元素编号的内容设置为数字+ = 1;

因此，由于数字为0；它只会在HTML上显示1。

如果您希望数字在单击一次按钮后自动加1。创建一个setInterval。

setInterval(() => {
    increase()
}, 5000) // increase every 5 seconds

Answer 3

function increase() {
    setInterval(() => document.getElementById("number").innerHTML = number += 1, 1000)
}

setInterval（）将调用一个匿名函数，该函数每秒增加一次数字（1000 ms），直到您调用clearInterval（）

Answer 4

这是我的演示方式

使用时间间隔
使用eventListener（非干扰性编码）
清除间隔
如何增加数字并更改速度
如何使用数据属性
如何使用类和querySelector

var number = 0,
  increment = 1,
  speed=1000, // one second
  tId;

function inc() {
  clearInterval(tId); // stop anything already running
  tId = setInterval(function() {
    document.getElementById("number").innerHTML = number += increment;
  }, speed);
}
function changeSpeed() {
  speed = +this.getAttribute("data-speed"); // get attribute and convert to number
  inc();
}
window.addEventListener("load", function() { // when page has loaded
  document.querySelectorAll(".start").forEach(function(but) {
    but.addEventListener("click", function() {
       increment = +this.getAttribute("data-inc") ; // get from button and convert to number 
       inc()
    });
  });

  document.getElementById("stop").addEventListener("click", function() { // when clicking
    clearInterval(tId);
  });

  document.querySelectorAll(".speed").forEach(function(but) {
    but.addEventListener("click", changeSpeed);
  });

});

<button type="button" class="start" data-inc="1">By 1</button>
<button type="button" class="start" data-inc="10">By 10</button>
<button type="button" class="speed" data-speed="1000">One a sec</button>
<button type="button" class="speed" data-speed="500">Two a sec</button>
<button type="button" id="stop">Stop</button>
<div>
  number: <span id="number">0</span>
</div>

Answer 5

您可以使用setInterval(function(){ //do someting every 3 seconds }, 3000);

您可以在interval参数中调用te函数或在其中编写代码

看这些例子 https://www.w3schools.com/jsref/met_win_setinterval.asp

如何在JavaScript中制作自动点击器？

5 个答案: