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

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>

有人可以把它变成自动点击器吗？如上所述，我只想单击一次按钮并让变量“数字”的值上升。谢谢。

标签： javascripthtml

Answer 1

这是我的展示如何

• 使用间隔
• 使用 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>