Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
countdowntimer
Advanced tools
Readme
CountdownTimer is a reverse count down jQuery plugin for displaying countdown as per need with its different configuration options. It is a perfect match for any coupon, auction site or product launch page. It also displays current time and comes with timezone and many regional languages support.
This project is looking for help! You can donate through Paypal and help spread the word. If you've used the plugin, or plan to use, consider a donation - any amount will help.
dist/
├── js/
| ├── jQuery.countdownTimer.js (37.16 kB)
| ├── jQuery.countdownTimer.min.js (compressed - 18.28 kB)
| ├── localisation/
| └── jQuery.countdownTimer-[region-code].js (regional language support js files)
├── css/
└── jQuery.countdownTimer.css
npm install countdowntimer
Include jQuery, the plugin and its css file on a page.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.countdownTimer.js"></script>
<!-- Good alternative is to include minified file jQuery.countdownTimer.min.js -->
<link rel="stylesheet" type="text/css" href="css/jQuery.countdownTimer.css" />
<!-- For regional language support, include below file -->
<!--<script type="text/javascript" src="js/localisation/jQuery.countdownTimer-[region-code].js"></script>-->
Add a div and span element.
<div id="countdowntimer"><span id="future_date"></span></div>
Initialize the countdowntimer
method with the required options on the span element id.
<script type="text/javascript">
$(function(){
$("#future_date").countdowntimer({
dateAndTime : "2020/01/01 00:00:00",
size : "lg"
});
});
</script>
How to set countdown time in hours, minutes seconds?
Just specify
hours
minutes
seconds
options with the required time while calling the plugin method.
How to remove seconds from the timer?
Use
displayFormat
option as for example displayFormat: "YODHM".
How to reset the timer?
Use the plugins stop function or
stopButton
option and provide button id to it.
How to modify countdowntimer display with our own styling?
Use
size, borderColor, fontColor, backgroundColor
options. MoreoverregexpMatchFormat and regexpReplaceWith
provide custom display formatting as per need.
Don't use timer options (hours, minutes, seconds), dateAndTime and currentTime simultaneously as all these options display different time.
regexpMatchFormat and regexpReplaceWith
will not function if used simultaneously with timeSeparator, labelsFormat and/or displayFormat
options as regex options provide custom display formatting.
If you are using regexp options, use them with size.
pauseButton, stopButton
options and plugins pause and stop methods can be used for user defined timer (i.e. setting hours, minutes and/or seconds options). It cannot be used for startDate, dateAndTime and currentTime
options as these times depend on either a future date or current date-time.
labelsFormat
has entirely different display. If used with size and/or timeSeparator
, it gains priority over the latter two and they won't function.
Following are the different options provided for initialising the countdowntimer
method with their default values.
hours : 0 // Set hours.
minutes : 0 // Set minutes.
seconds : 60 // Set seconds.
startDate : new Date() // Set a start date.
dateAndTime : new Date("1970/01/01 00:00:00") // Set end date for start date.
currentTime : false // Show current time.
size : "sm" // Set timer size.
borderColor : "#F0068E" // Set timer border Color.
fontColor : "#FFFFFF" // Set timer font Color.
backgroundColor : "#000000" // Set timer background Color.
timeSeparator : ":" // Set time separator.
tickInterval : 1 // Set timer interval.
timeUp : null // Provide time expire callback function.
expiryUrl : null // Provide url to load on expire.
regexpMatchFormat : null // Provide regular expression format to match.
regexpReplaceWith : null // Provide regular expression string to replace regexpMatchFormat.
pauseButton : null // Provide pause button id.
stopButton : null // Provide stop button id.
beforeExpiryTime : null // Set a time before expire.
beforeExpiryTimeFunction : null // Provide callback function at before expire time.
padZeroes : true // Pad zeroes to digits if < 10.
displayFormat : "HMS" // Timer display format.
labelsFormat : false // Timer display with labels.
timeZone : null // Set target date timezone.
**Regional Options**
digits : ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
labels : ['Years', 'Months', 'Days', 'Hours', 'Minutes', 'Seconds']
isRTL : false
Number
0
Number
0
Number
60
Javascript Date
new Date()
<?php echo date('Y/m/d H:i:s'); ?>
Javascript Date
new Date("1970/01/01 00:00:00")
<?php echo date('Y/m/d H:i:s'); ?>
Boolean
false
timeZone
). Shows time in a 24 - hour format. Default display is of format HH:MM:SS.Type: String
Default: sm
The size option defines the countdowntimer size and can be set to below values (use bootstrap sizes notation).
xl - Extra large
lg - Large
md - Medium
sm - Small
xs - Extra small
String
#F0068E
String
#FFFFFF
String
#000000
String
:
Number
1
Function
null
this
refers to the division that holds the widget. No parameters are passed in. Provide the name to this option without quotes.String
null
String
null
String
null
String
null
String
null
String
null
Function
null
this
refers to the division that holds the widget. No parameters are passed in. Provide the name to this option without quotes.Boolean
true
Type: String
Default: HMS
Set the display format for countdowntimer. Use the following characters (in order, or out of order) to indicate which time periods you want to display.
If any time period is not displayed, its time value is added to its superior.
Usage examples (In order)
You can also use the characters out of given order.
Boolean
false
Type: Number
Default: null
Set the target region timezone with this option. When used, it will countdown with respect to the time in that region. Set hours or minutes in it (works for both UTC + val and UTC - val). Can be used with startDate, dateAndTime and currentTime options.
Usage examples
Time Zone of Los Angeles (Pacific Daylight Time) UTC-7
Time Zone of Singapore (SGT) UTC+8
String Array
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
String Array
['Years', 'Months', 'Days', 'Hours', 'Minutes', 'Seconds']
Boolean
false
Use it to Pause / Resume the user defined countdowntimer (hours, minutes, seconds timer).
jQuery("#hms_timer").countdowntimer("pause", "pause");
jQuery("#hms_timer").countdowntimer("pause", "resume");
Use it to Stop / Start the user defined countdowntimer (hours, minutes, seconds timer). When stopped, timer resets to defined values.
jQuery("#hms_timer").countdowntimer("stop", "stop");
jQuery("#hms_timer").countdowntimer("stop", "start");
Use it to destroy the countdowntimer.
jQuery("#hms_timer").countdowntimer("destroy");
Following are the different code samples for using countdowntimer
method.
Reverse countdown till a specific future date from today. (for eg:- 2020/01/01 00:00:00)
$(function(){
$("#cdt").countdowntimer({
dateAndTime : "2020/01/01 00:00:00"‚
labelsFormat : true,
displayFormat : "YODHMS",
padZeroes : false,
timeZone : -7,
beforeExpiryTime : "01:01:05:05",
beforeExpiryTimeFunction : beforeExpiryFunc,
timeUp : timeIsUp,
expiryUrl : "https://www.npmjs.com/package/countdowntimer"
});
function beforeExpiryFunc() {
//Your code
}
function timeIsUp() {
//Your code
}
});
Reverse countdown to zero from time set to hours, minutes & seconds.
$(function(){
$("#cdt").countdowntimer({
hours : 3‚
minutes : 10‚
seconds : 10‚
displayFormat : "HM",
size : "lg",
timeSeparator : "/",
pauseButton : "pbtnId",
stopButton : "sbtnId"
});
});
Reverse countdown to zero from time set to hours and minutes.
$(function(){
$("#cdt").countdowntimer({
hours : 3‚
minutes : 10‚
size : "lg"
});
function urfunc() {
if(yourcond === true) {
jQuery("#cdt").countdowntimer("pause", "pause");
} else {
jQuery("#cdt").countdowntimer("pause", "resume");
}
if(yourothercond === true) {
jQuery("#cdt").countdowntimer("stop", "stop");
} else {
jQuery("#cdt").countdowntimer("stop", "start");
}
jQuery("#cdt").countdowntimer("destroy");
}
});
Reverse countdown to zero from time set to minutes and seconds.
$(function(){
$("#cdt").countdowntimer({
minutes : 20‚
seconds : 10‚
size : "lg"
});
});
Reverse countdown to zero from time set to hours and seconds.
$(function(){
$("#cdt").countdowntimer({
hours : 2‚
seconds : 10‚
size : "lg"
});
});
Reverse countdown to zero from time set to only hours.
$(function(){
$("#cdt").countdowntimer({
hours : 2‚
size : "lg",
tickInterval : 60
});
});
Reverse countdown to zero from time set to only minutes.
$(function(){
$("#cdt").countdowntimer({
minutes : 2‚
size : "lg"
});
});
Reverse countdown to zero from time set to only seconds.
$(function(){
$("#cdt").countdowntimer({
seconds : 25‚
size : "lg"
});
});
Display current time.
$(function(){
$("#cdt").countdowntimer({
currentTime : true‚
size : "lg",
borderColor : "#5D09FA",
backgroundColor : "#FAF209",
fontColor : "#FA0909",
timeZone : -420
});
});
Reverse countdown between a given start date (which can be server date and time or any given date) and end date.
$(function(){
$("#cdt").countdowntimer({
startDate : "2017/10/10 12:00:00",
dateAndTime : "2020/10/10 12:00:00",
size : "lg"
});
});
For taking startDate as current server date and time.
$(function(){
$("#cdt").countdowntimer({
startDate : "<?php echo date('Y/m/d H:i:s'); ?>",
dateAndTime : "2020/10/10 12:00:00",
size : "lg",
regexpMatchFormat : "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
regexpReplaceWith : "$1<sup>years</sup> / $2<sup>months</sup> / $3<sup>days</sup> / $4<sup>hours</sup> / $5<sup>minutes</sup> / $6<sup>seconds</sup>"
});
});
If no options are provided, by default timer of 60 seconds is displayed in small size.
$(function(){
$("#cdt").countdowntimer({
});
});
As a jQuery plugin, you also need to see the jQuery Browser Support.
jQuery greater than or equal to version 1.5.
Please post bug reports and other contributions (enhancements, features) to the GitHub issue tracker.
Copyright © Harshen Pandey
FAQs
Reverse count down jQuery plugin for displaying countdown as per need. Also displays current time.
The npm package countdowntimer receives a total of 148 weekly downloads. As such, countdowntimer popularity was classified as not popular.
We found that countdowntimer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.