The NNM Clock is an analog clock, which should be easy to include in your own page. Plain HTML, CSS and JavaScript (supported by the JavaScript date and time library from Luxon).
The NNM Clock came up as a spare time project, from the interesting discoveries found when compiling pros and cons for time zones (Time zones - to be or not to be?).
Below is an example of how you can create a clock with minimal configuration.
The following HTML is all that is used for the clock above:
<canvas
id="myClock"
class="nnmClock"
width="300"
height="300"></canvas>
You define canvas elements that will contain your clocks.
The only mandatory attributes for your canvas element are:
nnmClock (so we can find all the canvas elements that should contain a clock).
150 at the moment.
There are also some additional optional attributes for the canvas element:
dark or light (default).
marks, clean, special or numbers (default).
numbers, either 0-11 (sometimes 12 instead of 0) or 12-23 (sometimes 24 instead of 12) are used depending on the current hour of day.
special face is only showing the hour hand and the part of the clock face that really is needed (I think you will love it).
America/Los_Angeles, Europe/Stockholm or UTC. If missing, your local time zone is used.
true, the second hand will tick instead of float.
true, the clock will show a background color indicating the time of day. The clock will indicate the "appropriateness" of its local time. The hours 06-07 are indicated by red, 07-09 by orange, 09-16 by green, 16-18 by orange, 18-21 by red and all the rest by black (dark mode) or white (light mode).When hovering over a clock, the current digital time (24-hour clock), weekday, month, day of month and week are displayed together with the second hand. When hovering, only the two relevant numbers according to the current hour are shown.
Below are some other examples. First a ticking clock using UTC (a.k.a. Zulu time). Second a clock representing the "leader" of the local times in the world. Third and fourth are clocks using appropriate indicators (in light mode and dark mode respectively). Fifth clock is using a clean face. Sixth and seventh are using special face, data-face="special", with UTC and local time respectively.
The following HTML is all that is needed for the seven clocks above:
<canvas
id="myUtcClock"
class="nnmClock"
data-mode="dark"
data-face="marks"
data-tick-seconds="true"
data-time-zone-identifier="UTC"
width="200"
height="200"></canvas>
<canvas
id="myKiritmatiClock"
class="nnmClock"
data-time-zone-identifier="Pacific/Kiritimati"
width="200"
height="200"></canvas>
<canvas
id="myChicagoClock"
class="nnmClock"
data-time-zone-identifier="America/Chicago"
data-appropriate-indicator="true"
width="200"
height="200"></canvas>
<canvas
id="myKolkataClock"
class="nnmClock"
data-mode="dark"
data-time-zone-identifier="Asia/Kolkata"
data-appropriate-indicator="true"
width="200"
height="200"></canvas>
<canvas
id="myCleanUtcClock"
class="nnmClock"
data-mode="dark"
data-face="clean"
data-tick-seconds="false"
data-time-zone-identifier="UTC"
width="200"
height="200"></canvas>
<canvas
id="myNewLightUtcClock"
class="nnmClock"
data-mode="light"
data-face="special"
data-time-zone-identifier="UTC"
title="Time zone: UTC"
width="200"
height="200"></canvas>
<canvas
id="myNewDarkLocalTimeClock"
class="nnmClock"
data-mode="dark"
data-face="special"
title="Time zone: Browser's local time"
width="200"
height="200"></canvas>
A great example of NNM Clock usage is the Wall of time page. The only HTML needed is <div id="dashboard" class="dashboard"></div> and you will get a list of about 40 clocks.
There is also several examples of how you can configure the NNM Clock.
An example displaying three clocks with the special face.
A few other examples with a minimalistic browser window.
Three different JavaScript files are needed.
luxon.min.js - the Luxon date and time library.
nnmClock.js - contains the actual functionality for the NNM Clock.
yourOwnCode.js - contains the specific JavaScript functionality for your page. Often just a few lines of code is needed, that invokes some function(s) from the nnmClock.js file.
As an example, the specific JavaScript file included for the current page contains (the important part is ClockStarter):
// Start it all.
window.onload = () => {
Log.info('NNM Clock');
Log.info('Everything is loaded, start your engines ladies and gentlemen');
ClockStarter.startClockInEveryCanvas();
Log.info('Everything up and running');
};
static keyword.
Time zones - to be or not to be? My conclusion is that time zones must be destroyed.