WhenToMeetWhenToMeet

嵌入时区球体

您可以使用简单的 iframe 将 WhenToMeet 交互式 3D 时区球体嵌入到任何网站。球体显示城市标记和实时本地时间，并自动旋转以获得精美的外观。

球体嵌入

将此代码片段添加到您的 HTML：

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=newyork,london,tokyo&autoRotate=true&theme=dark"
  width="500"
  height="500"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

参数

使用 iframe src URL 上的查询参数配置嵌入：

参数类型默认值说明
citiesstring(无)逗号分隔的城市 ID，例如 newyork,london,tokyo
theme"light" | "dark""dark"配色主题
autoRotatebooleanfalse自动缓慢旋转球体
h24booleanfalse使用 24 小时制而不是 12 小时制
hideMarkersbooleanfalse隐藏城市标记（仅显示球体）

可用的城市 ID

从 时区应用 中使用城市 ID。常见的 ID 包括： newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

轻量级小部件

如果您只需要一个紧凑的时区时钟而不需要 3D 球体，请改用轻量级嵌入：

<iframe
  src="https://timezones.whentomeet.io/embed?cities=newyork,london,tokyo&theme=dark"
  width="300"
  height="250"
  style="border: none; border-radius: 12px;"
  title="Timezone Widget"
></iframe>

此小部件以列表格式显示城市时间，包含营业时间重叠信息，占用的资源也少得多。

尺寸建议

  • 球体在正方形容器（1:1 宽高比）中外观最佳。
  • 最小建议尺寸：300 x 300 像素。
  • 球体会根据纵向和横向方向自动调整摄像头 FOV。
  • 在 iframe 上使用 CSS border-radius 以获得精美的外观。

示例

深色主题并自动旋转

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=london,newyork,tokyo,sydney&theme=dark&autoRotate=true"
  width="600"
  height="600"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

浅色主题，24 小时制

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=berlin,paris,dubai&theme=light&h24=true"
  width="400"
  height="400"
  style="border: none; border-radius: 16px;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

仅显示球体（无标记）

<iframe
  src="https://timezones.whentomeet.io/embed/globe?hideMarkers=true&theme=dark&autoRotate=true"
  width="300"
  height="300"
  style="border: none; border-radius: 50%; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Globe"
></iframe>

Was this page helpful?