Create a Clock Or Counter Using FlipClock.Js

Hi, I am going to bring you the code to create a Flip Clock’s object using the Flip Clock library.

This library give us a great possibility to create a clock but also you can use it to create a counter for days, for minutes and seconds. So is a very useful library for us.

You can find futher information and all the documentation in the Flip Clock Web Page.

For create just one clock we just have to create a div with any class that we want and just initialize it in the Javascript file like this:

<div class=’clock’></div>
$(‘.clock’). FlipClock();

But there is a problem when you want to initialize more than one clock with the same class. The library just initialize the last object with the class. But do not worry I will show you how you can initialize more than one clock.

We can use the data attribute to create our clocks. Just add “data-clock = ‘clock’ ”. That will be all that we have to do in the HTML markup.


 <div data-clock></div>
<div data-clock></div>
<div data-clock></div>
<div data-clock></div>
<div data-clock></div>

Now let’s create some code in our Javascript file. We get all the objects with the data-clock attribute equals to clock, this is to initialize each one using a for statement. Let’s create the code.


var clocks = $('div[data-clock]');

for(var i = 0; i < clocks.length; i++) {
$(clocks[i]).FlipClock(3600 * (Math.random()*10));
}
});

The 3600 * (Math.random()*10) is to initialize the clock with a specific value, this value has to be in seconds.
If you want to change the skin of the Flip Clock you can do it if you change the CSS in the classes ‘.flip-clock-dot’, ‘.flip-clock-wrapper ul li a div div.inn

Libraries to use with Flip Clock:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
Link of the Example: Create FlipClock

Thanks for read me :)