弹出窗口和停止计数器需要 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() {

  if (!allowClick) return;

  count++;

  countblack++;

  displayCount.innerHTML = count;

  displayBlackCount.innerHTML = countblack;

}

red.onclick = function() {

  if (!allowClick) return;

  count++;

  countred++;

  displayCount.innerHTML = count;

  displayRedCount.innerHTML = countred;

}

startTime(60); // time in seconds

function startTime(time) {

  var timer = setTimeout(function() {

    black.setAttribute('disabled', 'disabled');

    red.setAttribute('disabled', 'disabled');

    allowClick = false;

    clearTimeout(timer)

  }, 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>