Analog Clock/Stopwatch Web Component

Preview:

Description:

A highly customizable analog clock & stopwatch component built using Custom Elements.

How to use it:

1. Import the analog-clock-element.js into the document.

<script src="analog-clock-element.js" defer></script>

2. Create an analog clock on the page.

<analog-clock mode="clock"></analog-clock>

3. Create a stopwatch.

<analog-clock mode="stopwatch"></analog-clock>

4. Set the size of the stopwatch.

<analog-clock size="200"></analog-clock>

5. Specify the number of marks.

<analog-clock marks="4"></analog-clock>

6. Determine whether to display the hour numbers on the dial

<analog-clock ticks="4"></analog-clock>

7. Customize the analog clock using your own CSS.

[marks="4"]::part(clock) {
  /* clock face */
}
[marks="4"]::part(tick) {
  /* or tick1 - tick12 */
}
[marks="4"]::part(marks) {
  /* marks */
}
[marks="4"]::part(hand-hour) {
  /* hour hand */
}
[marks="4"]::part(hand-minute) {
  /* minute hand */
}
[marks="4"]::part(hand-second) {
  /* second hand */
}

8. API methods.

const instance = document.querySelector('.myClock');
// clock mode
instance.mode = 'clock' 
// stopwatch mode
instance.mode = 'stopwatch'
// start/stop the stopwatch
analogClock.toggleStopwatch();
// reset the stopwatch
analogClock.resetStopwatch();
// get time elapsed in ms.
analogClock.getTimeElapsed();