jQuery Retro Flip Clock & Countdown Timer Plugin - FlipClock

FlipClock is a jQuery plugin for creating a clock & countdown timer that displays information in a digital format on a split flap display. The clock & countdown timer can be fully customized via CSS and full-featured developer API.

How to use it:

1. Include required FlipClock CSS in the head section of your page.

<link rel="stylesheet" href="/path/to/compiled/flipclock.css" />

2. Create a container for the clock.

<div class="clock"></div>

3. Include jQuery library and the jQuery FlipClock plugin at the bottom of the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/compiled/flipclock.min.js"></script>

4. Initialize the flip clock.

var clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter',
    autoStart: false,
    callbacks: {
      stop: function() {
        $('.message').html('The clock has stopped!')
      }
    }
});

5. Set a time you'd like to countdown from.

// set time
clock.setTime(220880);

// countdown mode
clock.setCountdown(true);

// start the clock
clock.start();

6. All default options.

/**
 * The clock's animation rate.
 * 
 * Note, currently this property doesn't do anything.
 * This property is here to be used in the future to
 * programmaticaly set the clock's animation speed
 */   

animationRate: 1000,

/**
 * Auto start the clock on page load (True|False)
 */ 
 
autoStart: true,

/**
 * The callback methods
 */   
 
callbacks: {
  destroy: false,
  create: false,
  init: false,
  interval: false,
  start: false,
  stop: false,
  reset: false
},

/**
 * The CSS classes
 */   
 
classes: {
  active: 'flip-clock-active',
  before: 'flip-clock-before',
  divider: 'flip-clock-divider',
  dot: 'flip-clock-dot',
  label: 'flip-clock-label',
  flip: 'flip',
  play: 'play',
  wrapper: 'flip-clock-wrapper'
},

/**
 * The name of the clock face class in use
 * 'TwentyFourHourClockFace', 'TwelveHourClockFace'
 */ 
 
clockFace: 'HourlyCounter',
 
/**
 * The name of the clock face class in use
 */ 
 
countdown: false,
 
/**
 * The name of the default clock face class to use if the defined
 * clockFace variable is not a valid FlipClock.Face object
 */ 
 
defaultClockFace: 'HourlyCounter',
 
/**
 * The default language
 * 'Spanish', 'Finnish', 'French'
 * 'Italian', 'Latvian', 'Dutch'
 * 'Norwegian', 'Portuguese', 'Russian'
 * 'Swedish', 'Chinese'
 */ 
 
defaultLanguage: 'english',
 
/**
 * The jQuery object
 */   
 
$el: false,

/**
 * The FlipClock.Face object
 */ 
 
face: true,
 
/**
 * The language object after it has been loaded
 */ 
 
lang: false,
 
/**
 * The language being used to display labels (string)
 */ 
 
language: 'english',
 
/**
 * The minimum digits the clock must have
 */   

minimumDigits: 0,

/**
 * The original starting value of the clock. Used for the reset method.
 */   
 
original: false,

/**
 * Is the clock running? (True|False)
 */   
 
running: false,

/**
 * The FlipClock.Time object
 */   
 
time: false,

/**
 * The FlipClock.Timer object
 */   
 
timer: false

Changelog:

2021-01-28

• Package & Doc update

---

This awesome jQuery plugin is developed by objectivehtml. For more Advanced Usages, please check the demo page or visit the official website.