Easy Countdown to Date with JavaScript & jQuery

JavaScript Countdown Timer

Basic Example: Counting down to 1st January 2020.

00

days

00

hours

00

minutes

00

seconds

This code byte provides a very simple way of producing a dynamic countdown timer to a particular date and time. It requires jQuery.

Alternatively, looking for a count up javascript count-up timer? head here: Javascript count up from date and time

Step 1: The basic HTML

<div id="countdown">
	<p class="days">00</p>
	<p class="timeRefDays">days</p>
	<p class="hours">00</p>
	<p class="timeRefHours">hours</p>
	<p class="minutes">00</p>
	<p class="timeRefMinutes">minutes</p>
	<p class="seconds">00</p>
	<p class="timeRefSeconds">seconds</p>
</div>

Step 2: Include jQuery

If you’re not already, you will need to include the jQuery library, as this javascript code depends on it. This enables and ensures the code works quickly and efficiently on all browsers.

Step 3: The Core Javascript

This is the main JavaScript that gets things going.
You can either put this in your JS file that is to be included on every page that requires the countdown (Eg. main.js), or just put it in <script></script> tags on specific pages.
The key part that you will require is the last few lines, where the countdown object is initiated, just change: date: "8 September 2020 09:00:00", to your desired date.
Eg: date: "25 December 2018 00:00:00",

/*
* Basic Count Down to Date and Time
* Author: @mrwigster / trulycode.com
*/
(function (e) {
  e.fn.countdown = function (t, n) {
  function i() {
    eventDate = Date.parse(r.date) / 1e3;
    currentDate = Math.floor(e.now() / 1e3);
    if (eventDate <= currentDate) {
      n.call(this);
      clearInterval(interval)
    }
    seconds = eventDate - currentDate;
    days = Math.floor(seconds / 86400);
    seconds -= days * 60 * 60 * 24;
    hours = Math.floor(seconds / 3600);
    seconds -= hours * 60 * 60;
    minutes = Math.floor(seconds / 60);
    seconds -= minutes * 60;
    days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
    hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
    minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
    seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
    if (r["format"] == "on") {
      days = String(days).length >= 2 ? days : "0" + days;
      hours = String(hours).length >= 2 ? hours : "0" + hours;
      minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
      seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
    }
    if (!isNaN(eventDate)) {
      thisEl.find(".days").text(days);
      thisEl.find(".hours").text(hours);
      thisEl.find(".minutes").text(minutes);
      thisEl.find(".seconds").text(seconds)
    } else {
      alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
      clearInterval(interval)
    }
  }
  var thisEl = e(this);
  var r = {
    date: null,
    format: null
  };
  t && e.extend(r, t);
  i();
  interval = setInterval(i, 1e3)
  }
  })(jQuery);
  $(document).ready(function () {
  function e() {
    var e = new Date;
    e.setDate(e.getDate() + 60);
    dd = e.getDate();
    mm = e.getMonth() + 1;
    y = e.getFullYear();
    futureFormattedDate = mm + "/" + dd + "/" + y;
    return futureFormattedDate
  }
  $("#countdown").countdown({
    date: "8 September 2020 09:00:00", // Change this to your desired date to countdown to
    format: "on"
  });
});

Step 4: Style it up

The very basic styling for the top example, I’ve left it very simple to ensure it’s easy for everyone to edit themselves – you can do better I’m sure!

#countdown p {
  display: inline-block;
  padding: 5px;
  background: #FFA500;
  margin: 0 0 20px;
}