Download
User Rating: 0/5 ( 0 votes)
Why FlipClock.js?
So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code. (Besides the domain was available, who could pass it up?). Some libraries have a huge cascade of conditionals, while others simply hard-code too much into their scripts. Most projects had a very narrow scope. After reviewing as many of the existing solutions as possible, it was determined a proper extendible API needed to be written to create any kind of clock or counter (and the flip effect is just cool). The following are the logical requirements that were considered when creating the API.
-
Use as a clock
-
Use as a timer
-
Use as a countdown
-
Themeable using pure CSS
-
Clean & Dry Syntax
-
Abstract everything into reusable objects
-
Full-Featured Developer API to create custom “Clock Faces”
Loading the Scripts
FlipClock.js requires a few files to work properly. The minified source contains all the clock faces for maximum portability.
<html>
<head>
<link rel="stylesheet" href="/assets/css/flipclock.css">
</head>
<body>
<div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>
</body>
</html>
Instantiating
FlipClock.js requires jQuery for DOM manipulation. It works a typical jQuery plugin, but instead of returning a jQuery object, a FlipClock object is returned.
var clock = $('.your-clock').FlipClock({
// ... your options here
});
var clock = new FlipClock($('.your-clock'), {
// ... your options here
});
Note, both these examples would produce the example same thing. Use the syntax that works best for you.
Options
-
autoStart
-
(boolean) If this is set to false, the clock will not auto start. The default value is true.
-
countdown
-
(boolean) If this is set to true, the clock will count down instead of up. The default value is false.
-
callbacks
-
(object) An object of callback functions that are triggered at various times. For more information, view the callback documentation.
-
classes
-
(object) This is an object of CSS classes to use to append to DOM objects
-
clockFace
-
(string) This is the name of the clock that is used to build the clock display. The default value isHourlyCounter.
-
defaultClockFace
-
(string) This is the default clock face to use if the defined clock face does not exist. The default value isHourlyCounter.
-
defaultLanguage
-
(string) This is the default langauge to use. The default value is english.
Methods
The following methods all belong to the FlipClock.Factory class.
start()
This method will start the clock just call the .start() method on an FlipClock object.
clock.start(function() {
// this (optional) callback will fire each time the clock flips
});
stop()
This method will stop the clock just call the .stop() method on an FlipClock object.
clock.stop(function() {
// this (optional) callback will fire after the clock stops
});
setTime()
This method will set the clock time after it has been instantiated just call the .setTime() method on an FlipClock object.
clock.setTime(3600);
setCountdown()
This method will change the clock from counting up or down.
clock.setCountdown(true);
getTime()
To get the clock time after it has been instantiated just call the .getTime() method on an FlipClock object.
var time = clock.getTime(); // Returns the FlipClock.Time object
Callbacks
-
destroy
-
This callback is triggered when the timer is destroyed
-
create
-
This callback is triggered when the clock face is created
-
init
-
This callback is triggered when the FlipClock object is initialized
-
interval
-
This callback is triggered with each interval of the timer
-
start
-
This callback is triggered when the clock is started
-
stop
-
This callback is triggered when the clock is stopped
-
reset
-
This callback is triggered when the timer has been reset
JS Tutorial
