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

JavaScript和SVG的便捷模拟时钟 – uptime
栏目分类:日期 / 时间   发布日期:2021-09-24   浏览次数:

Uptime 是一个由 JavaScript 驱动的模拟时钟,它可以旋转秒/分/小时表盘而不是移动指针。

使用:

1. 在页面中添加 uptime.css 和 uptime.js。

<link rel="stylesheet" href="uptime.css" />
<script src="uptime.js"></script>

2. 从 SVG 元素创建一个模拟时钟。

<svg class="clock" viewBox="0 0 100 100">
  <defs>
    <path id="path" d="M50,12a38,38 0 1,1 0,76a38,38 0 1,1 0,-76" />
  </defs>
  <path class="hand hours" d="M50 25 V50" />
  <path class="hand minutes" d="M50 14 V50" />
  <path class="hand seconds" d="M50 3 V50" />
  <text class="hour-marks" font-size="5" font-family="sans-serif" letter-spacing="-0.4" text-anchor="middle" />
  <g class="second-marks" />
  <g class="minute-marks" />
</svg>


官方网站:https://github.com/izeau/uptime

相关热词: 模拟时钟时钟

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