Author: | muan |
---|---|
Views Total: | 529 views |
Official Page: | Go to website |
Last Update: | September 2, 2021 |
License: | MIT |
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();