Cacher is the code snippet organizer for pro developers

<div class="countdown">
  <h1 class="header">SPECIAL OFFER ENDS IN</h1>
  <div class="square">
    <div class="digits" id="cd-hr">00</div>
    <div class="text">HOURS</div>
  </div>
  <div class="square">
    <div class="digits" id="cd-min">00</div>
    <div class="text">MINUTES</div>
  </div>
  <div class="square">
    <div class="digits" id="cd-sec">00</div>
    <div class="text">SECONDS</div>
  </div>
</div>

var counter = {};
window.addEventListener("load", function () {
  // COUNTDOWN IN SECONDS
  // EXAMPLE - 75 MINS = 75 X 60 = 4500 SECS
  counter.end = 4500;

  // Get the containers
  counter.hr = document.getElementById("cd-hr");
  counter.min = document.getElementById("cd-min");
  counter.sec = document.getElementById("cd-sec");

  // Start if not past end date 
  if (counter.end > 0) {
    counter.ticker = setInterval(function(){
      // Stop if passed end time
      counter.end--;
      if (counter.remain <= 0) { clearInterval(counter.ticker); }

      // Calculate remaining time
      var secs = counter.end;
      var hrs  = Math.floor(secs / 3600); // 1 hr = 60 secs X 60 mins
      secs -= hrs * 3600;
      var mins  = Math.floor(secs / 60); // 1 min = 60 secs
      secs -= mins * 60;

      // Update HTML
      counter.hr.innerHTML = hrs;
      counter.min.innerHTML = mins;
      counter.sec.innerHTML = secs;
    }, 1000);
  }
});

.countdown {
  margin: 0 auto;
  max-width: 350px;
  background: #000;
  font-family: Impact, Charcoal, sans-serif;
  text-align: center;
}
.countdown .header {
  color: #c61d1d;
  text-align: center;
  font-weight: normal;
  margin: 5px 0 10px 0;
}
.countdown .square {
  display: inline-block;
  padding: 10px;
  margin: 5px;
}
.countdown .digits {
  font-size: 24px;
  background: #fff;
  color: #000;
  padding: 20px 10px;
  border-radius: 5px;
}
.countdown .text {
  margin-top: 10px;
  color: #ddd;
}