Easy & Styleable jQuery Countdown Plugin - Countdown.js

Countdown.js is a simple-to-use jQuery plugin which allows you to create an easily styleable countdown timer which supports various valid date/time/duration strings.

Basic usage:

1. Add the jquery.countdown.js script into your webpage but after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.countdown.js"></script>

2. Wrap the target date/time/duration you wish to countdown from into the container like these:

<!-- Valid global date and time string -->
<div><time>2015-12-08T17:47:00+0100</time></div><!-- Paris (winter) -->
<div><time>2015-12-08T08:47:00-0800</time></div><!-- California -->
<div><time>2015-12-08T16:47:00+0000</time></div><!-- UTC -->

<!-- Human readable duration -->
<h1>24h00m59s</h1>
<h1>4h 18m 3s</h1>
<h1>00:01</h1>

<!-- Valid time string -->
<div>12:30:39.929</div>

<!-- Valid duration string -->
<div>P2DT20H00M10S</div>

<!-- Python datetime.timedelta str output -->
<!-- print datetime.timedelta(days=600, hours=3, minutes=59, seconds=12) -->
<div>600 days, 3:59:12</div>

3. Style the countdown timer whatever you like in your CSS. The sample CSS styles:

.countdown {
  display: table-cell;
  font-weight: normal;
}

.countdown .item {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  font-family: 'Open Sans', cursive;
  font-weight: 700;
  font-size: 160px;
  line-height: 180px;
  text-align: center;
  color: #B7B7B7;
  border-radius: 10px;
  margin: 50px 10px 50px 0;
  padding: 0 10px;
  background: #2A2A2A;
  background: -webkit-linear-gradient(#2A2A2A, #000);
  background: linear-gradient(#2A2A2A, #000);
  overflow: hidden;
}

.countdown .item-ss {
  font-size: 50px;
  line-height: 70px;
}

.countdown .item:after {
  content: '';
  display: block;
  height: 1px;
  border-top: 3px solid #111;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
}

.countdown .label {
  text-transform: uppercase;
  display: block;
  position: absolute;
  font-family: 'Open Sans', cursive;
  font-weight: 700;
  line-height: normal;
  right: 6px;
  bottom: 4px;
  font-size: 14px;
  color: #B9B9B9;
}

.countdown .item-hh .label,
.countdown .item-mm .label,
.countdown .item-ss .label { display: none; }

4. Call the plugin on the $(element). $(element) is a valid or any other HTML tag containing a text representation of a date/time or duration remaining before a deadline expires. If $(element) is a tag, the datetime attribute is checked first. If $(element) is not a tag, a new one is created and appended to .

$('time, div, h1').countDown({
  // OPTIONS
});

5. Full plugin options.

// the css class of the generated <time> tag
css_class:        'countdown',

// always display days if true even if none remains
always_show_days: false,

// display or hide labels
with_labels:      true,

// display or hide seconds
with_seconds:     true,

// display or hide separators between days, hours, minutes and seconds
with_separators:  true,

// always display hours/minutes/seconds in 2 digit format with a leading zero 
with_hh_leading_zero: true,
with_mm_leading_zero: true,
with_ss_leading_zero: true,

// label's text for days
label_dd:         'days',

// label's text for hours
label_hh:         'hours',

// label's text for minutes
label_mm:         'minutes',

// label's text for seconds
label_ss:         'seconds',

// separator character between hours, minutes and seconds
separator:        ':',

// separator character between days and hours
separator_days:   ','

Changelog:

2019-01-05

• Updated for jQuery 3.3.1+

2018-01-03

• Updated for jQuery 3.2.1+

2016-12-24

• v1.2.8

2016-12-23

• update for jQuery 3.0+

2016-03-24

• Bump to 1.2.5

---

This awesome jQuery plugin is developed by kemar. For more Advanced Usages, please check the demo page or visit the official website.