Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kemar/jquery.countdown
Unobtrusive and easily skinable countdown jQuery plugin generating a <time> tag.
https://github.com/kemar/jquery.countdown
Last synced: 3 months ago
JSON representation
Unobtrusive and easily skinable countdown jQuery plugin generating a <time> tag.
- Host: GitHub
- URL: https://github.com/kemar/jquery.countdown
- Owner: kemar
- Created: 2012-12-09T11:55:49.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2020-12-29T16:11:15.000Z (almost 4 years ago)
- Last Synced: 2024-08-04T18:04:19.725Z (4 months ago)
- Language: JavaScript
- Homepage: https://kemar.github.io/jquery.countdown/
- Size: 104 KB
- Stars: 81
- Watchers: 7
- Forks: 31
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [jQuery Countdown](https://github.com/kemar/jquery.countdown)
Unobtrusive and easily skinable countdown jQuery plugin generating a `
[Live demo](https://kemar.github.io/jquery.countdown/).
## Supported browsers
To use the countdown jQuery plugin you need an [up-to-date web browser supporting the HTML5 time element](http://caniuse.com/#feat=html5semantic).
## Installation
Get the plugin [from `npm`](https://www.npmjs.com/package/jquery.countdown):
```sh
$ npm install jquery.countdown
```
Or include this script after jQuery.
```html
```
## Usage
Create a countdown from the **value** of the `datetime` **attribute** of a `
```html
```
Create a countdown from a [valid global date and time](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-global-date-and-time-string) string (with time-zone offset).
```html
2012-12-08T17:47:00+0100
2012-12-08T08:47:00-0800
2012-12-08T16:47:00+0000
```
Create a countdown from a [valid time](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-time-string) string.
```html
12:30
12:30:39
12:30:39.929
```
Create a countdown from a [valid duration](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-duration-string) string.
```html
P2D
PT01H01M15S
PT20M20S
PT10S
```
Create a countdown from the **string representation** of a [Python `timedelta` object](https://docs.python.org/3/library/datetime.html#timedelta-objects).
```html
600 days, 3:59:12
00:59:00
3:59:12
```
Create a countdown from a human readable duration string.
```html
24h00m59s
2h 0m
4h 18m 3s
600 days, 3:59:12
600 jours, 3:59:12
00:01
240:00:59
```
Create a countdown from a string that can be interpreted by the [JavaScript `Date.parse()` function](http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2).
```html
document.write(date.toDateString())
document.write(date.toGMTString())
document.write(date.toISOString())
document.write(date.toUTCString())
```
## Rock'n'roll
```javascript
$('div, h1, time').countDown();
```
## Available options
- `css_class`: the css class of the generated `
## Events
`time.elapsed`: this event fires immediately when the time is elapsed.
```javascript
$('#my-countdown').on('time.elapsed', function () {
// do something...
});
```
`time.tick`: by default, this event fires every second(ish), the second passed parameter is the number of miliseconds left. Useful if you're doing something like a bar that fills up as time runs out.
```javascript
$('#my-countdown').on('time.tick', function (ev, ms) {
// do something...
});
```
## Generated markup
A valid `
```html
```
## Acknowledgements
Released under the [MIT License](http://opensource.org/licenses/mit-license).
Issues should be opened through [GitHub Issues](https://github.com/kemar/jquery.countdown/issues/).
[jQuery Countdown](https://github.com/kemar/jquery.countdown) is authored and maintained by [Kemar](https://marcarea.com).