使用 SVG 和 JavaScript 制作的包含毫秒的数字时钟

使用 SVG 和 JavaScript 创建一个带毫秒的数字时钟。外观的颜色可定制，也可以启用或者禁用毫秒显示，方法 `initClock` 可初始化并渲染时钟，它可以方便地在网页上显示实时、精确的计时，确保为用户提供准确的时间显示。

下面介绍如何使用 Svg 和 Javascript 创建带有毫秒的数字时钟

1.首先在 HTML 中添加一个div容器，让时钟显示在其中。在 HTML 文件中加入以下代码：

<div id="clock"></div>

2.添加一些基本样式，以增强时钟的视觉吸引力。您可以根据网站主题自定义背景和其他样式。

#clock {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100vw - 4px);
	height: auto;
	max-width: 300px;
}

3.最后，将以下 JavaScript 代码复制并粘贴到脚本文件或内联脚本标记中。这段代码定义了一个 initClock 函数，用于以毫秒为单位初始化和更新数字时钟。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
initClock(document.querySelector("#clock"), {color: '#D5FF77', dotColor: '#80AACC', showMs: true});
// refresh it if we leave the page
document.addEventListener("visibilitychange", () => {
  if (!document.hidden) {
		clock.innerHTML = '';
    initClock(document.querySelector("#clock"), {color: '#D5FF77', dotColor: '#80AACC', showMs: true});
  }
});

通过调整 initClock 函数中的选项，可以随意定制时钟的外观、启用/禁用毫秒显示等。