Customizable jQuery Countdown Timer Plugin - countdownTimer

File Size: 508 KB
Views Total: 7143
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable jQuery Countdown Timer Plugin - countdownTimer

Just another jQuery countdown timer plugin that counts down in seconds, minutes, hours and days to any date or a given time. Also can be used as a clock that displays current local time.

Basic Usage:

1. Load the latest version of jQuery and jQuery countdownTimer plugin in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>

2. Create a container for the countdown timer.

<span id="demo"></span>

3. Call the plugin and specify a date & time you want to count to.

$('#demo').countdowntimer({
  dateAndTime : "2017/12/25 00:00:00",
});

4. Add the following styles in your CSS file and change to your taste.

.style {
width: 100%;
font-family: sans-serif;
font-weight: bold;
border-style: solid;
}
.colorDefinition {
background: #000000;
color : #FFFFFF;
border-color: #F0068E;
}
.size_xl {
font-size: 50px;
border-width: 8px;
border-radius: 6px;
}
.size_lg {
font-size: 40px;
border-width: 7px;
border-radius: 5px;
}
.size_md {
font-size: 30px;
border-width: 5px;
border-radius: 4px;
}
.size_sm {
font-size: 20px;
border-width: 3px;
border-radius: 3px;
}
.size_xs {
font-size: 15px;
border-width: 2px;
border-radius: 2px;
}

5. Default Options.

$('#demo').countdowntimer({
  hours: 0,
  minutes: 0,
  seconds: 60,
  startDate: new Date(),
  dateAndTime: new Date("1970/01/01 00:00:00"),
  currentTime: false,
  size: "sm",
  borderColor: "#F0068E",
  fontColor: "#FFFFFF",
  backgroundColor: "#000000",
  timeSeparator: ":",
  tickInterval: 1,
  timeUp: null,
  expiryUrl: null,
  regexpMatchFormat: null,
  regexpReplaceWith: null,
  pauseButton: null,
  stopButton: null,
  beforeExpiryTime: null,
  beforeExpiryTimeFunction: null,
  padZeroes: true,
  displayFormat: "HMS",
  labelsFormat: false,
  timeZone: null
});

Change logs:

v2.0.1 (2017-10-30)

  • Update.

v1.0.9 (2017-03-19)

  • Adding before expiry time functionality

v1.0.8 (2015-04-19)

  • update.

v1.0.6 (2015-02-09)

  • update.

v1.0.5 (2014-06-09)

  • update.

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