https://github.com/ghostff/jquery-countdown-timer
Easy and dynamic time countdown system
https://github.com/ghostff/jquery-countdown-timer
countdown-clock countdown-timer javascript jquery js time
Last synced: 3 months ago
JSON representation
Easy and dynamic time countdown system
- Host: GitHub
- URL: https://github.com/ghostff/jquery-countdown-timer
- Owner: Ghostff
- Created: 2017-04-14T04:46:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-14T20:42:01.000Z (almost 9 years ago)
- Last Synced: 2025-02-14T12:54:34.990Z (12 months ago)
- Topics: countdown-clock, countdown-timer, javascript, jquery, js, time
- Language: JavaScript
- Size: 13.7 KB
- Stars: 1
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery-Countdown-Timer
Easy and dynamic time countdown system
```html
```
Initializing plugin
```js
$('.count_down').countdown();
```
``0D:09H:47M:18S``
``0D:21H:48M:32S``
## Optional plugin configurations on initialization
day
object
The attributes that will be rendered to the day html element. 'text' attribute will be appended to the current day(s)
hour
object
The attributes that will be rendered to the hour html element. 'text' attribute will be appended to the current hour(s)
minute
object
The attributes that will be rendered to the minute html element. 'text' attribute will be appended to the current minute(s)
second
object
The attributes that will be rendered to the second html element. 'text' attribute will be appended to the current second(s)
update
number : 1000
The time update rate(milliseconds)
placeholder
string : d-date
The attribute name of the html element where end date is stored and will be compared from
date
string
For some reasons you don't want to pass your countdown date to a placeholder, or you want a global date for all countdown element, then you can pass the end date as a value to this index
onComplete
function
A function that will be called when time elapses. This function accepts a single argument which is the object of the current html element that countdown is being rendered in
## Date usage approaches
Note: doing this:
```html
```
```js
$('.count_down').countdown({placeholder: 'm-date'});
```
Is same as:
```html
```
```js
$('.count_down').countdown({date: 'April 15, 2017 11:50:00'});
```
Though each approach have its ups/downs.
## Configuration work though
By default
```js
$('.count_down').countdown();
```
outputs: ``2D:10H:27M:46S``
```js
$('.count_down').countdown({
day: {
text: 'Days ',
},
hour: {
text: 'Hours ',
},
minute: {
text: 'Minutes ',
},
second: {
text: 'Seconds',
},
});
```
outputs: ``2Days 10Hours 27Minutes 46Seconds``.
And yes, you can get more creative with the configurations.
```js
$('.count_down').countdown({
day: {
class: 'day-class',
id: 'day-id',
style: 'color:red'
},
hour: {
text: 'H: ',
style: 'color:green;'
},
minute: {
text: 'M: ',
style: 'color:black;'
},
second: {
text: 'S ',
style: 'color:black;'
},
update: 1000,
placeholder: 'd-date',
date: 'April 15, 2017 11:50:20',
onComplete: function (e) {
e.addClass('expired');
return 'Expired';
}
});
```