<analog-clock>
A Custom Element for an analog clock.
Attributes
-
mode
(string
):stopwatch
orclock
. -
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 inms
.
Known issues
In Safari, quickly switching between mode might result in janky animation. Related bug reports: