A long time ago I wrote a simple Javascript clock. It made use of the technology of the day and was clumsy by modern standards, right down to the 7-segment GIF images used to render it.
Things have moved on, so here is a rather better Clock, implemented as a JavaScript module, and rendered using your choice of font. This means that you can render it at any size, and in any font you wish (I've used a seven-segment font, link below). I've also added some options to control the format of the clock that can be used at initialisation, or on-the-fly. Enjoy!
Usage
Create an element to hold your clock:
<div id="clockDiv"><div>
Create a script tag to import the module and initialise it:
<script type="module">
import {Clock} from "./clockModule.min.js";
let clock = new Clock('clockDiv');
</script>Options
The constructor accepts an optional second argument - an object containing a list of options. For example
let clock = new Clock('clockDiv',{showSeconds:false});
Options can also be set on demand by calling the setOptions method:
let clock = new Clock('clockDiv',{showSeconds:false});
clock.setOptions({showSeconds:false});
The complete list of options are:
let options = {
showSeparators:true,
separatorOn:':',
separatorOff:' ',
flashSeparator:true,
showSeconds:true,
hours24:true,
showAMPM:true,
timeZone:undefined
};
The timezone option defaults to undefined, and displays the local system time. Setting it to any of the IANA timezones supported by the browser (e.g. Europe/London) will display the current time in that zone.
clock.setOptions({timezone:'Europe/London'});Thanks to Keshikan for the seven-segment font used here.
Questions or comments? Contact me!