jquery countdownTimer Plugin Demo
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"
});
});
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.