https://github.com/pashakiz/countdown.js

countdown on JavaScript
https://github.com/pashakiz/countdown.js

Last synced: 2 days ago
JSON representation

countdown on JavaScript

• Host: GitHub
• URL: https://github.com/pashakiz/countdown.js
• Owner: pashakiz
• Created: 2015-09-11T20:34:34.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-08-21T12:42:50.000Z (3 months ago)
• Last Synced: 2024-08-21T14:13:08.974Z (3 months ago)
• Language: JavaScript
• Size: 59.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# countdown.js

demo

## Documentation

1) Add HTML-code.

Set your date for countdown in `data-countdown-date` attribute (format: yyyy-m-d-h-m-s) **or** set time to `data-countdown-time` attribute (format: h-m-s).

```HTML



```


```HTML



```

Class `countdown-js` is required. If you want more than one timer - just copy/paste this HTML-code with another date **or** time.





2) Add countdown.css

```HTML

```

You can customize this css-code. The full HTML-structure will be generated:

```HTML



  


    


      


      


    

    


    


      


      


    

    


    


      


      


    

    


    


      


      


    

  



```


If you need to remove some part of clockface items - you can hide them using css. For example to remove the days section:

```CSS

.clockface-item.clockface-item_days {

  display: none;

}

.clockface-item.clockface-item_days + .clockface__separator {

  display: none;

}

```

3) Add countdown.js:

```HTML

```

4) When DOM is ready (or load) - init countdown!

```JS

document.addEventListener('DOMContentLoaded', initCountDown);

```

Enjoy it!

## Options:

Add attribute `data-show-titles="true"` for output titles likes *«days»*, *«hours»*, *«mins»*, *«secs»*:

```HTML



```


Add attribute `data-hide-left-zero="true"` for hide left zero of days/hours/mins/secs (for example: `1` instead `01`):

```HTML



```