当前位置:主页 > JavsScript库 > 日期 / 时间 >

模拟时钟/秒表Web组件 - analog-clock-element.js
栏目分类:日期 / 时间   发布日期:2021-09-03   浏览次数:

使用自定义元素构建的高度可定制的模拟时钟和秒表组件。

如何使用它:

1. 导入analog-clock-element.js到文档中。

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

2. 在页面上创建一个模拟时钟。

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

3. 创建一个秒表。

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

4. 设置秒表的大小。

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

5. 指定标记数。

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

6.确定是否在表盘上显示小时数字

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

7. 使用您自己的 CSS 自定义模拟时钟。

[marks="4"]::part(clock) { 
  /* 钟面 */
} 
 
[marks="4"]::part(tick) { 
  /* 或 tick1 - tick12 */
} 
 
[marks="4" ]::part(marks) { 
  /* 标记 */
} 
 
[marks="4"]::part(hand-hour) { 
  /* 时针 */
} 
 
[marks="4"]::part(hand-分钟) { 
  /* 分针 */
} 
 
[marks="4"]::part(hand-second) { 
  /* 秒针 */
}

8. API 方法。

const instance = document.querySelector('.myClock');
 
//时钟模式
instance.mode = 'clock'
 
// 秒表模式
instance.mode = 'stopwatch'
 
// 启动/停止秒表
analogClock.toggleStopwatch();
 
// 重置秒表
analogClock.resetStopwatch();
 
// 以毫秒为单位获取经过的时间。
analogClock.getTimeElapsed();


官方网站:https://github.com/muan/analog-clock-element

相关热词: 时钟秒表

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库