Introduction
--
,
What is W3FClockTimer?
W3Flints ClockTimer is a powerful, cross-browser and standalone clock engine written in pure Javascript. It allows you to implement a clock, a timer or a countdown widget in seconds, or create a sophisticated component extending the core library.
A basic implementation
Create a new clock, using the flexible HTML renderer:
HTML:
Include the dependencies:
<head>
<link rel="stylesheet" href="src/w3fclocktimer.css" />
<script src="src/w3fclocktimer.js"></script>
</head>
Create a placeholder inside the <body> block:
Javascript:
Create a new instance inside a <script> block:
Result:
::
--
,
Options
This is the list of default options:
mytarget.W3FClockTimer({
//use it to localize your instances. See the Languages section
lang: 'default',
device: {
//use 'clock' or 'timer'
type: 'clock',
//set it to off if you want to enable it manually
ison: true,
//the offset, in seconds
offset: 0
},
//the refresh speed, in milliseconds
step: 100,
//see the Renderers section to get the full list
renderer: {
type: 'html',
settings: {}
},
//use it to handle some time-dependant events. See the Milestones and bindings section
milestones: {},
bind: {
//fired when the instance is initialized
init: function () {},
//fired when the core updates itself (based on step option)
tick: function (key, device) {},
//fired when the device is stopped
stop: function (device) {},
//fired when the instance in clicked
click: function (device) {},
//Timer only: fired when the difference between the deadline and the current time is zero
deadline: function (device) {}
}
});
Check out the devices and renderers pages to explore the full list of built-in features.