jQuery countdownTimer Plugin Demos

Reverse count down jquery plugin as per your need.

Initial Setup

Add this in html page

<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.countdownTimer.css" />

add div and span element

<div id="countdowntimer"><span id="future_date"><span></div>

Reverse countdown till a specific future date from today.
(for eg:- 2015/01/01 00:00:00)

Days Hours Minutes Seconds

Settings:-

$(function(){
	$("#future_date").countdowntimer({
                dateAndTime : "2015/01/01 00:00:00"‚
		size : "lg"
	});
});

dateAndTime takes value in format "YYYY/MM/DD HH:MM:SS" where HH is a 24 - hours format.

You may be wondering how to set the "size" option. Well, It's discussed at the end in Display Settings.

Reverse countdown to zero from time set to hours, minutes & seconds.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#hms_timer").countdowntimer({
                hours : 3‚
		minutes : 10‚
                seconds : 10‚
                size : "lg"
	});
});

Hours can take positive values starting from 0. Minutes, Seconds takes values from 0 to 59.

Reverse countdown to zero from time set to hours and minutes.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#hm_timer").countdowntimer({
                hours : 3‚
		minutes : 10‚
                size : "lg"
	});
});

Hours can take positive values starting from 0. Minutes takes values from 0 to 59.

Reverse countdown to zero from time set to minutes and seconds.

Minutes Seconds

Settings:-

$(function(){
	$("#ms_timer").countdowntimer({
		minutes : 20‚
                seconds : 10‚
                size : "lg"
	});
});

Minutes takes positive values starting from 0. Seconds takes values from 0 to 59.

Reverse countdown to zero from time set to hours and seconds.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#hs_timer").countdowntimer({
		hours : 2‚
                seconds : 10‚
                size : "lg"
	});
});

Hours takes positive values starting from 0. Seconds takes values from 0 to 59.

Reverse countdown to zero from time set to only hours.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#h_timer").countdowntimer({
		hours : 2‚
                size : "lg"
	});
});

Hours takes positive values starting from 0.

Reverse countdown to zero from time set to only minutes.

Minutes Seconds

Settings:-

$(function(){
	$("#m_timer").countdowntimer({
		minutes : 2‚
                size : "lg"
	});
});

Minutes takes positive values starting from 0.

Reverse countdown to zero from time set to only seconds.


Settings:-

$(function(){
	$("#s_timer").countdowntimer({
		seconds : 25‚
                size : "lg"
	});
});

Seconds takes positive values starting from 0.

Display current time.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#current_timer").countdowntimer({
		currentTime : true‚
                size : "lg"
	});
});

currentTime takes either true or false.

If no options provided.

If no options are provided, by default timer of 60 seconds is displayed in small size.

Settings:-

$(function(){
	$("#seconds_timer").countdowntimer({
	});
});

Display Settings

Sizes (use bootstrap sizes notation).

$(function(){
	$("#xlarge").countdowntimer({
                dateAndTime : "2015/01/01 00:00:00"‚
                size : "lg"
	});
});
xl-Extra large



lg-Large



md-Medium



sm-Small



xs-Extra small



What else, you can also set the border color, background and font color. See below.

Setting border color, background and font color.

Hours Minutes Seconds

Settings:-

$(function(){
	$("#current_timer").countdowntimer({
		currentTime : true‚
                size : "lg"‚
                borderColor : "#5D09FA"‚
                backgroundColor : "#FAF209"‚
                fontColor : "#FA0909"
	});
});

By default borderColor is "#F0068E", fontColor is "#FFFFFF", backgroundColor is "#000000".



Note:-

Please take care not to use timer options(hours, minutes, seconds), dateAndTime and currentTime simultaneously as all these options display different time. Also, calling countdowntimer method with the same timer options(hours, minutes, seconds), dateAndTime or currentTime set differently on a single page will not work (for example:- If you call countdowntimer method twice on a single page and set dateAndTime option in it both times with different values, timer for only the first set value will be displayed in both timers).