 |
| FilpDown.js - Style Retro Countdown Timer In JavaScript |
flipdown.js Style Retro is a lightweight, responsive, high-performance countdown plugin to create a retro-style flipping countdown clock that shows how many days/hours/minutes/seconds until an event you provide.
How to use it:
1. Add the stylesheet flipdown.css and JavaScript flipdown.js to the html file.
<link rel="stylesheet" href="css/flipdown/flipdown.css" /> <script src="js/flipdown/flipdown.js"></script>
2. Create a container element to place the countdown clock.
<div id="flipdown" class="flipdown"></div>
3. Initialize the plugin and specify the DateTime (Unix timestamp in seconds) the clock will countdown from.
var flipdown = new FlipDown(datetime);
4. Start the countdown clock.
flipdown.start();
5. Do something when the countdown ends.
flipdown.ifEnded(() => {
console.log('The countdown has ended!');
});
6. Change the default theme.
var flipdown = new FlipDown(datetime, el, {
theme: 'light' // or dark
});
Live Demo
See the Pen FilpDown.js - Retro Countdown Timer In JavaScript by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- flipdown-master.zip
- Size :
- 21.61KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT