A Custom Element for an Analog Clock/Stopwatch Web Component

Analog Clock Element is a highly customizable stopwatch and clock element created with custom elements.

analog clock javascript, javascript analog clock code free download, javascript digital clock with date, javascript timer countdown with seconds, analog clock html code

How to make use of it:

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

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

2. Create an analog clock on the web 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 or not to show the hour numbers on the dial.

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

7. Customize the analog clock utilizing your individual 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 strategies.

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();

Attributes

mode (string): stopwatch or clock.
size (number): Width and height in pixel.
marks (number): Number of markings on the edge of the clock for telling the time.
ticks (boolean): Whether to display the hour numbers on the dial.

Shadow Parts

::part(tick): The numbers on the dial.
::part(tick): The numbers on the dial.
::part(tick1)…::part(tick12): Each of the nubmers on the dial.
::part(clock): The clock face.
::part(marks): The markings on the edge of the clock.
::part(hand-hour): The hour hand.
::part(hand-minute): The minute hand.
::part(hand-second): The second hand.

Methods

analogClock.mode = 'clock'/'stopwatch' switches mode between clock and stopwatch.
analogClock.toggleStopwatch() starts and stops the stop watch.
analogClock.resetStopwatch() resets stopwatch to 0.
analogClock.getTimeElapsed() get time elapsed in ms.

Analog Clock/Stopwatch Web Component, analog clock element Plugin/Github, javascript clock, html digital clock