W3Flints Clock-Timer Examples



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:


Include the dependencies:

  <link rel="stylesheet" href="src/w3fclocktimer.css" />
  <script src="src/w3fclocktimer.js"></script>

Create a placeholder inside the <body> block:



Create a new instance inside a <script> block:



:: -- ,


This is the list of default options:

  //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.