时钟功能

• 更新于一年前

时钟功能可在您网站的任意位置实时显示当前准确的时间和日期。只需将光标放在要插入时钟的位置，然后从页面上方的“页面选项”菜单中选择“时钟”即可启用。

时区设置

默认情况下，时钟会显示“本地时间”——即访问者设备的当前时间。如需显示特定时区时间，取消勾选“本地时间”选项，然后从列表中选择相应的 UTC 偏移量。

例如：

• 伦敦 (UTC) — 05:14
• 洛杉矶 (-7) — 22:14
• 摩加迪沙 (+3) —08:14
• 上海 (+8) — 13:14

请注意：时钟不会自动调整夏令时（DST）。

样式与格式定制

时钟提供多种预设格式（例如：“12:07:56”或“13/10/23”），也可通过模板关键词自定义显示。要自定义时钟格式，打开时钟设置，在“时钟格式”菜单中选择“自定义”。

• 示例：

使用代码 The {ordinal} of {month-name}, {year} 后，时钟将显示为“The twenty-first of September, 2023”。

您可在此处查看完整的关键词列表及实时示例。

通过调整“添加前导零”的设置，让个位数自动补零（例如，将 3 显示为 03）。还可在设置中选择其他格式，如 12 小时制或 24 小时制。

• CSS 自定义

您可以通过 CSS 中的 digital-clock 选择器来控制时钟的样式。时钟中关键词生成的每个部分都可以通过 digital-clock::part(section) 进行样式设置，或更精确地通过对应关键词控制，例如 digital-clock::part(month-name)。

例如，如果当前字体支持表格对齐数字（tabular lining numerals），时钟默认会使用这种样式。如需切换其他风格，可在 CSS 中添加以下代码：

digital-clock::part(section) {

    font-variant:lining-nums;

}

虽然这种样式有时更美观，但在非等宽字体中，这可能会导致时间、日期等快速变化的数值出现“跳动”效果。

定制文本内容

通过 CSS 变量可自定义时钟中的文本内容，这对翻译或自定义文案很有用。

以下代码列出了时钟的所有默认文本变量。您可以将其复制到您的 CSS 中，并根据需要进行自定义修改。每个变量都标明对应的关键词和含义。

digital-clock {

/* {time-of-day} - 一天中的时间段 */
  --0-3: "凌晨"; /* late night */
   --3-6:"清晨"; /* early morning */
   --6-9: "早晨"; /* morning */
   --9-12: "上午"; /* late morning */
   --12-15: "下午"; /* afternoon */
   --15-18: "傍晚"; /* late afternoon */
   --18-21: "晚上"; /* evening */
   --21-24: "深夜";/* late evening */

/* {period} - 上/下午 */
   --am: "AM";
   --pm: "PM";

/* {day} - 星期几 */
   --sunday: "星期日";
   --monday: "星期一";
   --tuesday: "星期二";
   --wednesday: "星期三";
   --thursday: "星期四";
   --friday: "星期五";
   --saturday: "星期六";

/* {month-name} - 月份全称 */
   --january: "一月";
   --february: "二月";
   --march: "三月";
   --april: "四月";
   --may: "五月";
   --june: "六月";
   --july: "七月";
   --august: "八月";
   --september: "九月";
   --october: "十月";
   --november: "十一月";
   --december: "十二月";

/* {ordinal} - 序数词 */
   --ordinal-1: "第一";
   --ordinal-2: "第二";
   --ordinal-3: "第三";
   --ordinal-4: "第四";--ordinal-5: "第五";
   --ordinal-6: "第六";
   --ordinal-7: "第七";
   --ordinal-8: "第八";
   --ordinal-9: "第九";
   --ordinal-10: "第十";
   --ordinal-11: "第十一";
   --ordinal-12: "第十二";
   --ordinal-13: "第十三";--ordinal-14: "第十四";
   --ordinal-15: "第十五";
   --ordinal-16: "第十六";
   --ordinal-17: "第十七";--ordinal-18: "第十八";
   --ordinal-19: "第十九";
   --ordinal-20: "第二十";
   --ordinal-21: "第二十一";--ordinal-22: "第二十二";
   --ordinal-23: "第二十三";
   --ordinal-24: "第二十四";
   --ordinal-25: "第二十五";
   --ordinal-26: "第二十六";
   --ordinal-27: "第二十七";
   --ordinal-28: "第二十八";
   --ordinal-29: "第二十九";
   --ordinal-30: "第三十";
   --ordinal-31: "第三十一";
}

例如，以下 CSS 代码将时钟显示当前 {time-of-day} 的文本替换为 emoji 表情：

digital-clock {
   --0-3: "🌌🛌💤";
   --3-6: "🥱📢🐓";
   --6-9: "😪☕️📰";--9-12: "🌳🏢🚙";
   --12-15: "😋🥢🍱";
   --15-18: "👩🏽‍💻👨‍💻👨🏾‍💻";--18-21: "🍺😤🕺";
   --21-24: "🏡😵‍💫🚕";
}