W3Flints Clock-Timer

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.