Create Simple Countdown Timer in Pure JavaScript

How to create a simple live countdown timer using countdown.js, without jQuery.

Count down timers can be useful for all types of things online. In ecommerce, Amazon uses them to create a sense of urgency with shoppers for limited deals or shipping deadlines. Fan sites use them to get their user base excited for TV show premiers and movie releases.

Countdown until midnight

Here is how to do a custom live countdown on your page using pure javascript (no jQuery needed).

Basic Usage

We will create a countdown until 2050, when the UN predicts the ocean will run out of fish at current fishing levels.

First, create the element where you want to display the countdown.

Countdown until 2050
<h1 id="countdown-holder"></h1>

Second, include countdown.js on the page, using the path to where you uploaded the file.

<script src="/js/countdown.js"></script>

Then, we will use the script to populate the HTML on page load. We pass JavaScript Date object to countdown(), then use the toString() method to output the default timer text.

var clock = document.getElementById("countdown-holder")
  , targetDate = new Date(2050, 00, 01); // Jan 1, 2050

clock.innerHTML = countdown(targetDate).toString(); 
Remember: JavaScript uses a zero based scale for months (0 is January, 11 is December)

Finally, we will add a timer to update the countdown every second.

var clock = document.getElementById("countdown-holder")
  , targetDate = new Date(2050, 00, 01); // Jan 1, 2050;

clock.innerHTML = countdown(targetDate).toString();
  clock.innerHTML = countdown(targetDate).toString();
}, 1000);


Countdown until 2050:

Dynamic Countdown

You can also use this to tell let a user know they will be logged out after a certain period of inactivity.

You will be logged out in <span id="logout-timer"></span>
var timer = document.getElementById("logout-timer")
  , now = new Date()
  , deadline = new Date(now.getFullYear, now.getMonth, now.getDate, now.getHours, now.getMinutes + 15);

timer.innerHTML = countdown(deadline).toString();
  timer.innerHTML = countdown(deadline ).toString();
}, 1000);
You will be logged out in

Advanced Control

CountdownJS provides many ways to customize the string that is outputted by the toString() method. But if you want complete control, simply omit this completely and it will return an object with the countdown details.

var tdy = new Date()
  , tmrw = new Date(tdy.getFullYear(), tdy.getMonth(), tdy.getDate() + 1);

  days: 0
  end: Tue Dec 03 2013 11:29:24 GMT-0800 (Pacific Standard Time)
  hours: 12
  minutes: 30
  months: 0
  seconds: 35
  start: Wed Dec 04 2013 00:00:00 GMT-0800 (Pacific Standard Time)
  units: 222
  value: -45035036
  years: 0
Small dog web development studio

View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.

Small Dog Studios, LLC. Small Dog Studios News