Clock face Guide

Overview

The Clock API allows developers to easily update their app's display based on the current date and time. Although setInterval() could be used in a similar fashion, the Clock API handles tick events at the correct precision and timing.

The ontick event returns a JavaScript date object with the current date and time.

import clock from "clock";

clock.granularity = 'seconds'; // seconds, minutes, hours

clock.ontick = function(evt) {
  // Output the date object
  console.log(evt.date.toString());
};

Digital Clock

To create a simple digital clock, we need a <text> component, and the Clock API to update the display.

<svg viewport-fill="fb-cyan">
  <text id="myClock" x="50%" y="50%+15"
      fill="black" font-size="32" font-family="System-Regular"
      text-anchor="middle" text-length="20">00:00:00</text>
</svg>
import document from "document";
import clock from "clock";

let myClock = document.getElementById("myClock");

clock.granularity = 'seconds'; // seconds, minutes, hours

clock.ontick = function(evt) {
  myClock.innerText = ("0" + e.date.getHours()).slice(-2) + ":" +
                      ("0" + e.date.getMinutes()).slice(-2) + ":" +
                      ("0" + e.date.getSeconds()).slice(-2);
};