jquery countdownTimer Plugin Demo

Download

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:- 2018/01/01 00:00:00)

Settings:-

$(function(){
	$("#future_date").countdowntimer({
                dateAndTime : "2018/01/01 00:00:00"‚
		size : "lg"‚
		regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})"‚
      		regexpReplaceWith: "$1<sup>days</sup> / $2<sup>hours</sup> / $3<sup>minutes</sup> / $4<sup>seconds</sup>"
	});
});

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 between a given start date (which can be server date and time or any given date) and end date.

Days Hours Minutes Seconds

Settings:-

$(function(){
	$("#given_date").countdowntimer({
                startDate : "2014/10/01 00:00:00"‚ //set server date and time as "<?php echo date('Y/m/d H:i:s'); ?>".
                dateAndTime : "2018/01/01 00:00:00"‚ //end date
		size : "lg"
	});
});

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

Set server date and time as "<?php echo date('Y/m/d H:i:s'); ?>". Please note the format of date ("Y/m/d H:i:s").

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"‚
		pauseButton : "pauseBtnhms"‚
		stopButton : "stopBtnhms"
	});
});

Hours can take positive values starting from 0. Minutes, Seconds takes values from 0 to 59. More information about Pause and Stop buttons is provided in More Settings.

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({
	});
});

More Settings

timeSeparator

The separator between the various parts of the countdown timer. By default it is ":".

tickInterval

The time interval in which you want countdown to tick. Set the interval in seconds. Note that you should only use intervals that are multiples of a minute (60) and for only seconds timer, in the multiples of the seconds set for timer. By default it is 1.

timeUp

The name of the callback function that is invoked when the countdown reaches zero. Within the function this refers to the division that holds the widget. No parameters are passed in. Provide the name to this option without quotes.

expiryUrl

The Url to load after countdown reaches zero. Provide Url in quotes.

regexpMatchFormat

The Regular expression format to be matched and replaced for advanced formatting of timer display.

regexpReplaceWith

The replacement text to replace the regular expression.

pauseButton

The ID of the button which will Pause / Resume the timer. Provide ID in quotes.

stopButton

The ID of the button which will Stop / Start the timer. Provide ID in quotes.

$(function(){
	$("#more_options").countdowntimer({
                minutes : 20‚
                size : "lg"‚
                tickInterval : 5‚
                timeSeparator : "-"‚
                timeUp : timeisUp
	});
           
        function timeisUp() {
        	//Code to be executed when timer expires.
        }
});
Minutes Seconds

Display Settings

Sizes (use bootstrap sizes notation).

$(function(){
	$("#xlarge").countdowntimer({
                dateAndTime : "2018/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.
regexpMatchFormat and regexpReplaceWith will not work if used simultaneously with timeSeparator option as they have same purpose, i.e. formatting. For basic usage go for timeSeparator.