在自由样式时钟里，你可以通过编写 HTML 和 CSS 代码来设计自己的时钟样式，同时，遵循下面的指南，你可以轻易地将时间信息集成到你设计的时钟当中。

为了更好地理解接下来的内容，你至少需要以下基础知识：

现在，开始准备你的代码。第一步，你需要一个 元素，接下来的所有代码都将在这个 元素内完成。

自由样式时钟的自定义元素名为 和其他所有时钟一样，自由样式时钟同样继承于Clock Provider，同样是提供了 init() 和 update() 方法，分别用于初始化时钟和每分钟一次的更新时钟，不同的是，自由样式时钟的 HTML 和 CSS 由用户提供。在初始化时，用户提供的 HTML元素将会被挂载在自由样式时钟内部的 Shadow DOM 中。选择 Shadow Dom 而非 Light Dom，是因为使用插槽（）元素是重要的特性之一。当然，使用 Shadow Dom 也有几点不便，比如，为了保证其内部的隔离性，Shadow Dom 中无法解析 @import @font-face @property 规则（也许还有更多），下面是 自身的样式：

Scene Tab 遵循最新的浏览器拓展规范 Manifest V3 设计，Manifest V3 提高了用户环境的安全性，但同时也使得浏览器拓展失去了一部分的灵活性，其中就包括不再允许行内的JavaScript脚本以及从字符串生成的JavaScript脚本，这意味着你无法提交自己的 JavaScript 代码。为此，我们为自由样式时钟设计了一种基于格式化字符的时间字符解析器。

要使用这个解析器，你需要在的HTML元素中添加 data-format 属性，并为其赋予一个或多个字符组合的值。这些字符会被解析器识别并转换为相应的时间单位。例如，假设您有一个HTML元素如下：

解析器将 data-format 属性值 d 识别为当前日期的两位数字。例如，如果今天是2023年2月21日，那么这个元素的 innerHTML 将被替换为"21"。

可以被正确识别并转换的字符将会在下一段落的表格中展示，你可以自由组合 data-format 属性中的字符，无法识别的字符将会原样输出。例如，如果您希望显示当前时间的小时和分钟，可以将data-format属性设置为 h:i

在这个例子中，H 和 i 是可以被识别的字符，分别代表小时和分钟，而 : 并不是可识别的字符，因此，这个 HTML 元素会被解析为：

我们可以再给出一个例子：

特别的，如果想要原样输出能够识别的字符，使用反斜杠 \ 来标记下一位字符：

时间字符串解析器的设计灵感来源于 PHP DateTime::format (opens in a new tab) 方法，因此支持的字符格式与 PHP 中的格式大部分相同，具体如下表所示，需要注意的是，部分字符并未做支持（用删除线和红色标记），具体原因会在后文阐述；也有一些字符的使用方法于前文略有区别（用黄色标记），同样将会在后文说明。

也许你已经注意到，和秒相关的秒 s、毫秒 v 并没有做完全支持，而微秒 u、时间戳 U 则并不被支持，这是因为 Scene Tab 设计的时钟信息更新周期为一分钟，不过我们仍然有其他方法实现秒数的展示。

上文介绍的将时间信息赋予 HTML 元素的方法简介直观，但仍然有不足：

如前文所述，浏览器不再允许在浏览器拓展中执行由用户提交的代码。为了解决上面两点问题，我们还在时间解析器中设计了基于 CSS 变量的工作模式，再加上一点点的 CSS 知识，你将几乎能够在 Scene Tab 中实现所有创意想法。

只使用 HTML 和 CSS 来实现一个动态变化的时钟通常有几种解决方案：

无论是哪种方法，都可以在不依赖 JavaScript 的情况下实现一个时钟，但是，想要初始化时钟的时刻，仍然需要 JavaScript 的帮助，而这项工作，正是由我们正在介绍的时间字符解析器完成的。你需要关注的，仅仅是让你的时钟按照真实的节拍动起来。

由于前文提到的原因，其实方案2是无法在这里应用的，下面的第一个例子使用方案 1 实现。

我将为你展示几个例子，来了解基于 CSS 变量的工作模式，更重要的是，领略 CSS 的迷人之处。

特别需要注意的是，CSS 变量的每次改变（在这里是每分钟更新一次），浏览器都将重新计算与之相关的 CSS 属性，因此有时会出现意料之外的情况，比如，当你将目标 CSS 变量用于动画的延时（animation-delay）时候，每次更新都会重新计算动画的当前进程，这个时候，我们只需要第一次对 CSS 变量进行赋值，而非每次都更新，请使用 data-refresh="false" 来声明这一点，你会在下面的例子中看到具体的使用方法。

也许你已经注意到，Scene Tab 中，有些时钟允许你指定其中某一部分的图像的内容，这是通过自定义元素的插槽 （）实现的。在你的时钟中定义一个 元素，你将能够通过设置页面将任何已有的图像套用到插槽内。

选择背景图像后，背景图像元素将会插入这个插槽

在常规的网页开发中 从外部导入字体有以下几种方法：

正如前文所述，第二、第三种方法是不支持的。

使用第一种方法，那么 标签将会在其他元素插入文档之前先被插入到网页的 内。

最后，你可以在你的时钟里添加 meta 元素，用来描述时钟的标题、简介、作者、和预览图，这四种元数据分别由 [property="og:title"]、 [property="og:image"]、[name="og:author"]、[name="description"] 的元素描述：

这些元数据并不会被插入网页中，以免影响网页原本的元数据信息。

很遗憾的是，即使这样，你也并没有真正地以完全自由的方式创造自己的时钟，你仍然要遵循上文解释的一系列规范。不过，无论是代码还是设计，它们都仅仅是具象化你的创意表达的工具，真正自由地落地你的创意，你将动用的是你手边一切的工具，而不仅仅是代码或设计软件，现在，开始创造吧！