弹出窗口和停止计数器需要 JavaScript 帮助

Question

我希望为这个项目提供一些帮助。我正在使用 Javascript 创建一个小项目，我对 HTML、CSS 和 JavaScript 仍然很陌生。我想用我的程序做的是，计数器将在 1 分钟过去后停止，并出现一个弹出窗口，不再接受任何点击。以下是我的代码，任何帮助将不胜感激！

var count = 0;

var countblack = 0;

var countred = 0;

var countButton = document.getElementById("black");

var countButtonC = document.getElementById("red");

var displayCount = document.getElementById("displayCount");

black.onclick = function() {

  count++;

  countblack++;

  displayCount.innerHTML = count;

  displayCountblack.innerHTML = countblack;

}

red.onclick = function() {

  count++;

  countred++;

  displayCount.innerHTML = count;

  displayCountred.innerHTML = countred;

}

http://jsfiddle.net/wr1ua0db/544/

Answer 1

您可以使用setTimeout60 秒计数，然后禁用按钮。下面是解决方案var allowClick = true;var count = 0;var countblack = 0;var countred = 0;var black = document.getElementById("black");var red = document.getElementById("red");var displayCount = document.getElementById("displayCount");var displayBlackCount = document.getElementById("displayBlackCount");var displayRedCount = document.getElementById("displayRedCount");black.onclick = function() {&nbsp; if (!allowClick) return;&nbsp; count++;&nbsp; countblack++;&nbsp; displayCount.innerHTML = count;&nbsp; displayBlackCount.innerHTML = countblack;}red.onclick = function() {&nbsp; if (!allowClick) return;&nbsp; count++;&nbsp; countred++;&nbsp; displayCount.innerHTML = count;&nbsp; displayRedCount.innerHTML = countred;}startTime(60); // time in secondsfunction startTime(time) {&nbsp; var timer = setTimeout(function() {&nbsp; &nbsp; black.setAttribute('disabled', 'disabled');&nbsp; &nbsp; red.setAttribute('disabled', 'disabled');&nbsp; &nbsp; allowClick = false;&nbsp; &nbsp; clearTimeout(timer)&nbsp; }, 1000 * time)}<button id="black">Count Black</button><button id="red">Count Red</button><div>Display Count: <span id="displayCount">0</span></div><div>Black Count: <span id="displayBlackCount">0</span></div><div>Red Count: <span id="displayRedCount">0</span></div>