1.0.2 • Published 3 years ago
analog-clock-element v1.0.2
<analog-clock>
A Custom Element for an analog clock.
Attributes
mode(string):stopwatchorclock.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: