End Result

Why Use FlipClock.js

FlipClock.js provides you with a highly customisable foundation on which you can base your clock, eliminating the need for complex rewriting of code. You can use the plugin as a clock, timer or countdown like the demo and theme it with pure CSS.

Getting Started

First we want to create a simple HTML file, this will call in the required jQuery files and CSS file. Below you can see I pull in the jQuery library, the minified FlipClock.js file and a scripts.js file. The scripts.js file contains the options for the actual countdown clock, I also make use of the Google font library and pull in a couple of nice fonts for the demo.

Creating The Content

Once our above raw html template is setup, we can add the content.

Below, you will see I have added the basic text content and classes that are ready to be themed using CSS. The div with the class dw_clock is referenced in our scripts.js file and this is where the clock will be loaded. You will also see I have included a ‘naked’ version of the Mailchimp html form, this will also be themed in our CSS file.

FlipClock.JS Setup

The FlipClock.js functionality is really the heart of this coming soon landing page, we have already included jQuery and the minified Flipclick.js minified jQuery file. Next we need to initiate our clock and set any options we wish to use.

The purpose of this clock is to countdown to a set date in the future, aka our launch date. Below, as annotated in the comments we grab the current date, set our future date (for the demo purposes) then find the difference. There is a whole load of additional options and methods you can pass into the clock.

FlipClock.JS Themeing

FlipClock.js also comes with a deafult theme, I have included this as a separate stylesheet for the purposes of the tutorial. You can theme the entire clock with pure CSS should you wish.

Conclusion, Demo & Download

It is a very simple, effective html template – useful for future product launches. It really does not require an excessive break down and commentary as it fairly self explanatory basic HTML/CSS and jQuery. There are loads of other options and uses for the clock itself, for this tutorial we have only really scratched the surface of what is possible with the FlipClock.js plugin.

Hi Guys, lovely but unfortunately for newbies like myself the tutorial is useless as we are unable to change the date. It would be lovely if you could provide us with an easier explanation in changing the date. Please :)

Hi, must say a great tutorial. But i having a big trouble to figure out to set the date right? have try to understand the Date function by reading javascript library but cant figure it out. I only get like 3000 days when trying to set the date a month from now, how will I do that?

do i need to copy one of the things you mentioned or is it just an example? so no edit to style.css, scripts.js, flipclock.css, or flipclock.min.js? is there still something wrong? awaiting on your fast reply