网页嵌入翻页时钟：一个 iframe 就够了

这是一段可以直接贴进任何网站的代码。贴上去，你的页面上就有一个会走的翻页时钟。

不用装插件，不用改主题文件，不用注册账号，也不要钱。

下面讲四件事：怎么加、有哪几种样式、什么场合用得上、怎么调成你自己的样子。

I. 三分钟加到你的网站

先去嵌入生成器。左边选样式、时区、颜色，右边立刻能看到效果；满意了，点「显示代码」，复制那一段。

然后把它贴进你的网站。不同平台的位置不一样：

保存，刷新页面，钟就在那里了。

几个容易卡住的地方：WordPress 的经典编辑器要切到「文本」模式；用 Elementor 这类页面构建器的，找「HTML」小工具；Notion 只能贴网址，所以钟下面那行署名链接不会出现。

II. 两种样式，选一个

左边是翻页，右边是纯数字。两个都是真的，都在走。

翻页模仿老式车站和机场的出发牌。数字分成上下两半，翻过去的时候上半片会转一下。它有存在感，适合放在页面上方、活动页、或者任何你希望被人注意到的地方。

纯数字就是一行大字。安静、清楚，适合侧栏、文章中间、仪表盘——你希望人一眼读到时间，而不是先注意到那个钟。

一句话：想让钟本身当装饰，选翻页；只想让人看时间，选纯数字。

尺寸有三档常用值：

宽度给得比这更窄，钟会整体缩小，不会裁切，但字会跟着变小。

III. 什么场合用得上

同一段代码，四种场合。配色和尺寸不同，代码只差几个参数。

活动页。 发布会、开业、婚礼邀请、跨年页面——页面上有个在走的钟，比一张静态截图有分量。

营业时间。 咖啡馆、餐厅、工作室的官网上，放一个显示本地时间的钟，比写「周一至周五 9:00–18:00」更直观：客人自己看一眼就知道现在开没开。

远程团队。 看板上放一个客户所在城市的钟，开会前不用心算时差。

作品集和个人博客。 一个会动的小东西，成本几乎为零，但页面立刻显得不那么模板化。

落地页和产品页。 放在页脚或角落，不抢内容，但让页面看起来是活的。

有一种场合不适合：需要倒计时的地方。比如「距离上线还有 3 天」。这个钟显示的是当前时间，不是倒数——它只会告诉你现在几点。

IV. 调成你网站的颜色

默认它没有背景，是透明的。所以它落在你的页面上，就像长在那里一样，不会出现一块突兀的白板或黑洞。

但透明也意味着它不知道你的页面是什么颜色。页面是浅色的，它默认的浅色主题刚好合适；页面是深色的，你得告诉它一声。

两种办法。

一、一键主题。 在生成器里选「深色」或「浅色」，两套配好的颜色，点一下就行。

二、自己配色。 三个参数：

• bg：整块背景，默认透明
• card：翻牌卡的底色
• ink：数字的颜色

卡片换成了琥珀色。外面那块深色是这篇文章的背景，不是钟的——钟自己没有背景。

生成器里有颜色选择器，点几下就行，不用记这些参数名。

V. 时间和内容

时区。 默认显示访客自己电脑上的时间。想固定显示某个城市，写城市名：Asia/Tokyo、Europe/London、America/New_York。夏令时它会自己跟上，换季那天不用你动手。

12 还是 24 小时。 改一个数字：format=12 或 format=24。

秒。 不想要那一格一直在跳，关掉它。

日期和城市名。 只有纯数字样式有：可以加一行日期，也可以加一个城市标签，比如「TOKYO」。

点击跳转。 默认点整块钟会打开 Clockhub。不想让访客被带走，关掉就行。

这些都是生成器里的开关，勾选完代码自动变，不用手改。

VI. 它会拖慢我的网站吗

一张普通的网页照片 200 KB 上下，这个钟 3.6 KB。

不会。它压缩之后 3.6 KB，一个请求。作为对比，一张普通的网页照片是 200 KB 左右——这个钟不到它的五十六分之一。

它不加载 React，不加载任何网络字体，不加载图标库。字体用的是你设备上本来就有的那些（苹方、微软雅黑、Helvetica），所以不用下载。

而且它默认懒加载：访客没滚动到那个位置，它根本不会加载。

唯一会额外加载的是统计脚本，我们想知道有多少人在用。它等页面空闲之后才启动，不跟你的内容抢带宽。本地预览时它不会发数据。

VII. 常见问题

要付费吗？要注册吗？

不用。没有账号，没有水印，也没有「升级到专业版」。

会有广告吗？

钟里没有广告，也不弹窗。ClockHub 主站靠广告维持，但嵌入出去的钟里不插任何广告。

手机上会变形吗？

不会。它会按你给的框自动缩放，横屏竖屏都填满，不会裁切。

一个页面能放几个？

可以放很多个，每个用不同的时区都行。比如一个团队页面上并排放东京、伦敦、纽约三个钟。

我的网站用别的平台，能用吗？

只要那个平台能插入 HTML 或 iframe，就能用。上面表格里列了几个常见的。如果平台只让贴网址（比如 Notion），只贴地址那一部分，别贴整段代码。

为什么显示的时间跟我电脑不一样？

检查时区参数。不写就是访客本地时间；写了就固定在那个城市，不管你人在哪。

会影响 SEO 吗？

不会。iframe 里的内容不算你页面的内容，搜索引擎不会把它当成你的文字——反过来说，你也别指望靠它给页面加「时间」相关的关键词。它也不会拖慢页面：3.6 KB，还带懒加载。

能商用吗？

可以。个人站、商业站都能用，不用申请，也不用署名。

代码末尾默认带一行小小的「Clockhub」链接。不想留，直接删掉那一行，钟照常运行。

VIII. 去拿你的代码

上面那几个钟都是真的，不是截图。它们用的就是同一个文件，和你将要拿到的一字不差。

去嵌入生成器：选样式、选时区、调颜色，代码自动生成，复制粘贴就完事。整个过程不用一分钟。

如果你想要的不只是时间——设置抽屉、字体、农历、全屏——那是站内的翻页时钟，它更完整，但搬不进别人的页面。

而嵌出去的这个，只做一件事：安静地待在你页面的角落，一秒翻一次。