<p>Staging duration (seconds)</p>
<button onclick="begin(5)">5</button>
<button onclick="begin(10)">10</button>
<button onclick="begin(15)">15</button>
<p id="countdown"></p>
body {
  background-color: black;
}
p {
  color: white;
}
var timer, delay;

function begin(c) {
  delay = Math.floor(1 + 6 * Math.random());
  clearTimeout(timer);
  document.body.style.backgroundColor = "black";
  seconds(c);
}

function seconds(c) {
  document.getElementById("countdown").innerText = c;
  if (c == 0) document.body.style.backgroundColor = "yellow";
  if (c == -delay) document.body.style.backgroundColor = "green"; 
  c--;
  timer = setTimeout(function () {
    seconds(c);
  }, 1000);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.