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" }); });
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).