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

Question

我想在这个项目上得到一些帮助。我正在创建一个小项目与Javascript，我仍然是新的超文本标记语言，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

您可以使用setTimeout来计数60秒，然后禁用这些按钮。以下是解决方案

​

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>

​