全球时间钟：多时区并排看，跨时区开会再也不用算时差

和海外同事约会议，最怕在脑子里同时换算三个时区。这个工具把多个城市的时间并排摆在一起，每张卡片显示当地时间、日期、UTC 偏移和「白天 / 夜间」标签，跟着真实时钟每秒刷新；城市顺序可以拖，12/24 小时制随手切。先看成品，再讲怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「多时区对照」做成一面并排的时间墙：

• 常用城市开箱即用：默认北京、东京、伦敦、纽约、洛杉矶五座城市，添加后立即显示。
• 并排实时刷新：当地时间、日期、时区偏移、白天 / 夜间标签每秒同步。
• 拖拽排序：按开会习惯把常用城市拖到最前面。
• 12 / 24 小时制：一键切换，偏好写进 localStorage。
• 关键字搜索：城市多的时候按名称筛选，支持小图标和时区偏移参考。
• 昼夜标签：自动判断每座城是白天还是夜间，一眼看清「现在对方方便接电话吗」。
• 纯前端：所有时间都由浏览器本地 Intl 计算，不上传任何数据。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「全球时间钟」单文件网页应用：添加北京、东京、伦敦、纽约、洛杉矶等常用城市后，并排实时显示各城市的当地时间、日期、时区偏移和“白天/夜间”标签；支持拖拽调整城市顺序、12/24 小时制切换、按关键字搜索城市，并跟随真实时间每秒更新。界面清爽易读，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这次项目里的实际动作：

• 开头探测端口时同样遇到沙箱 PYTHONHOME / PYTHONPATH 被污染的问题，用 env -u PYTHONHOME -u PYTHONPATH 清理后再探测空闲端口。
• 创建 /workspace/world-clock 目录，把城市数据库、时区换算、拖拽排序和昼夜判断写进单文件 index.html。
• 落在 3005 端口起服务并自检通过，给出内部访问地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 用 Intl.DateTimeFormat 直接取目标时区的小时

时区换算最容易弄错的不是分钟和秒，而是「目标时区的日期小时」。hourInZone 直接用浏览器的 Intl.DateTimeFormat 指定 timeZone 取 24 小时制的小时数，24 特殊处理成 0：

function hourInZone(tz,date){
  const s=new Intl.DateTimeFormat('en-US',{timeZone:tz,hour:'2-digit',hour12:false}).format(date);
  let h=parseInt(s,10);if(h===24)h=0;return h;
}

2. 显示时间按 12 / 24 小时制切换 locale

fmtTime 根据开关选择 en-US（12 小时制）或 en-GB（24 小时制）来格式化某时区的当前时间：

function fmtTime(tz,date,h12){
  return new Intl.DateTimeFormat(h12?'en-US':'en-GB',{timeZone:tz,hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:h12}).format(date);
}

3. 城市表 + 默认城市 + 本地保存

城市库统一收拢成 CITY_MAP，默认就是五座跨国常联系的城市；用户拖拽后的顺序和 12/24 小时制选择存进 localStorage，下次打开还在：

const CITY_MAP=Object.fromEntries(CITY_DB.map(c=>[c.id,c]));
const DEFAULT_CITIES=['beijing','tokyo','london','newyork','losangeles'];
const state={cities:[...DEFAULT_CITIES],hour12:false};

function loadState(){
  try{
    const s=JSON.parse(localStorage.getItem('worldclock_v1'));
    if(s&&Array.isArray(s.cities))state.cities=s.cities.filter(id=>CITY_MAP[id]);
    if(s&&typeof s.hour12==='boolean')state.hour12=s.hour12;
  }catch(e){}
  if(!state.cities.length)state.cities=[...DEFAULT_CITIES];
}

4. 每秒渲染昼夜标签

每张城市卡片都渲染一个 昼 / 夜 标签，render 会重建卡片列表，update 以 1 秒为节奏刷新所有时间，配合 hourInZone 判断白天还是夜间。

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-world-clock

总结

全球时间钟把多时区对照做成一排会动的卡片：hourInZone 用 Intl.DateTimeFormat 直接拿目标时区的小时，fmtTime 通过切换 locale 实现 12/24 小时制，城市表收进 CITY_MAP 并用 localStorage 记住顺序和偏好，每秒刷新一次时间。整个过程没有第三方依赖，纯前端跑通。后续可以再接日程会议邀请生成、时区会议投票，或把时间差提示做成「对方现在几点」的提醒卡片。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz