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

Вы можете использовать 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>