Customizable jQuery Countdown Timer Plugin - countdownTimer
File Size: | 508 KB |
---|---|
Views Total: | 7143 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.