Simple Pure Javascript Countdown Timer (Free Download)

Welcome to a tutorial and example on how to create a simple Javascript Countdown Timer. Need to do a countdown for the launch of an event, store, or product? Or a timer for an offer? Let us walk through one in this guide – Read on!

 

TABLE OF CONTENTS

 

 

 

SIMPLE COUNTDOWN

<!-- (A) LOAD LIBRARY & THEME -->
<link href="countdown-dark.css" rel="stylesheet">
<script src="countdown.js"></script>
 
<!-- (B) GENERATE COUNTDOWN TIMER HERE -->
<div id="demoA"></div>
 
<!-- (C) ATTACH COUNTDOWN TIMER -->
<script>
counter.attach({
  target : document.getElementById("demoA"),
  remain : 5400 // 90 mins = 5400 secs
});
</script>

This is as straightforward as can be.

1. Load the Javascript and CSS.
2. Create an empty <div> where you want the countdown timer.
3. Use counter.attach() to create the countdown timer.
   • target The HTML <div> to generate the timer in.
   • remain Time remaining, in seconds.

 

RUN FUNCTION ON TIME END

counter.attach({
  target : document.getElementById("demoB"),
  remain : 65,
  after : () => console.log("TIMER HAS ENDED!")
});

Just provide an additional after : FUNCTION in the options.

 

COUNTDOWN TO GIVEN DATE

// FOR THIS EXAMPLE, WE TAKE 2 DAYS FROM NOW
// IN YOUR PROJECT THIS IS NEW DATE("YOUR TARGET DATE/TIME")
var till = new Date(Date.now() + 172800000);
 
// ATTACH COUNTDOWN
counter.attach({
  target : document.getElementById("demoC"),
  remain : counter.toSecs(till)
});

Use counter.toSecs(new Date("TARGET DATE")) to help you.

 

 

 

PART 1) INITIALIZE – ATTACH COUNTDOWN TIMER

// (A) HELPER - CREATE HR/MIN/SEC CELL
// txt : text for the cell (all small letters)
square : txt => {
  let cell = document.createElement("div");
  cell.className = `cell ${txt}`;
  cell.innerHTML = `<div class="digits">0</div><div class="text">${txt}</div>`;
  return cell;
},
 
// (B) INITIALIZE COUNTDOWN TIMER
// target : target html container
// remain : seconds to countdown
// after : function, do this when countdown end (optional)
attach : instance => {
  // (B1) GENERATE HTML
  instance.target.className = "countdown";
  if (instance.remain >= 86400) {
    instance.target.appendChild(counter.square("days"));
    instance.days = instance.target.querySelector(".days .digits");
  }
  if (instance.remain >= 3600) {
    instance.target.appendChild(counter.square("hours"));
    instance.hours = instance.target.querySelector(".hours .digits");
  }
  if (instance.remain >= 60) {
    instance.target.appendChild(counter.square("mins"));
    instance.mins = instance.target.querySelector(".mins .digits");
  }
  instance.target.appendChild(counter.square("secs"));
  instance.secs = instance.target.querySelector(".secs .digits");
 
  // (B2) TIMER
  instance.timer = setInterval(() => counter.ticker(instance), 1000);
},

Yikes, this looks very complicated, but keep calm and look carefully.

• counter.attach() is exactly what we called to create the countdown timer. All it does is generate the HTML and do a setInterval() to start the timer.
• counter.square() is a helper function to create the day/hour/minute/second HTML cell.

That’s all.

 

 

PART 2) COUNTDOWN TICKER

// (C) COUNTDOWN TICKER
ticker : instance => {
  // (C1) TIMER STOP
  instance.remain--;
  if (instance.remain<=0) {
    clearInterval(instance.timer);
    instance.remain = 0;
    if (typeof instance.after == "function") { instance.after(); }
  }
 
  // (C2) CALCULATE REMAINING DAYS/HOURS/MINS/SECS
  // 1 day = 60 secs * 60 mins * 24 hrs = 86400 secs
  // 1 hr = 60 secs * 60 mins = 3600 secs
  // 1 min = 60 secs
  let secs = instance.remain;
  let days = Math.floor(secs / 86400);
  secs -= days * 86400;
  let hours = Math.floor(secs / 3600);
  secs -= hours * 3600;
  let mins = Math.floor(secs / 60);
  secs -= mins * 60;
 
  // (C3) UPDATE HTML
  instance.secs.innerHTML = secs;
  if (instance.mins !== undefined) { instance.mins.innerHTML = mins; }
  if (instance.hours !== undefined) { instance.hours.innerHTML = hours; }
  if (instance.days !== undefined) { instance.days.innerHTML = days; }
},

This looks intimidating again, but just take a minute to study the code. All it does is decrement the remaining seconds by 1, then update the HTML.

 

 

PART 3) COUNTDOWN TO GIVEN DATE

// (D) HELPER - CONVERT DATE/TIME TO REMAINING SECONDS
// till : (date object) countdown to this date/time
toSecs : till => {
  till = Math.floor(till / 1000);
  let remain = till - Math.floor(Date.now() / 1000);
  return remain<0 ? 0 : remain;
}

counter.attach() only takes in the remaining time in seconds. So this is a small helper function to automatically calculate the remaining seconds till the given date.

 

EXTRA) COUNTDOWN HTML

<div id="ID" class="countdown">
  <div class="cell days">
    <div class="digits">00</div>
    <div class="text">days</div>
  </div>
  <div class="cell hours">
    <div class="digits">00</div>
    <div class="text">hours</div>
  </div>
  <div class="cell mins">
    <div class="digits">00</div>
    <div class="text">mins</div>
  </div>
  <div class="cell secs">
    <div class="digits">00</div>
    <div class="text">secs</div>
  </div>
</div>

For you guys who are curious, here is what the Javascript will generate.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

PLAY ALARM AFTER TIME ENDS?

<script>
var alarm = new Audio("ALARM.MP3");
counter.attach({
  target : document.getElementById("TARGET"),
  remain : 123,
  after : () => alarm.play()
});
</script>

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• CSS Flex – CanIUse

This countdown timer will work on all modern browsers.

 

LINKS & REFERENCES

• UTC date on MDN
• Or if you prefer to work with the client’s local time – To locale date on MDN.
• Example on CodePen – Javascript Countdown Timer