Retro Flipping Countdown Timer In JavaScript – flipdown.js

Category: Date & Time , Javascript | January 2, 2020
Author: PButcher
Views Total: 7,156 views
Official Page: Go to website
Last Update: January 2, 2020
License: MIT

Preview:

Retro Flipping Countdown Timer In JavaScript – flipdown.js

Description:

flipdown.js 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
});

You Might Be Interested In:


2 thoughts on “Retro Flipping Countdown Timer In JavaScript – flipdown.js

  1. kovef83973

    Hi How can I show specified time “h m s” or “m s”. for eg need to set time for 5 min or a specified time. Please tell me to solve this issue…

    Reply

Leave a Reply