时间戳转换器：秒/毫秒与本地时间互转，跨时区不再心算

打开网页，顶部就每秒刷新「当前时间 + 当前时间戳（秒/毫秒）」；下面一边输入 Unix 时间戳、一边选个日期时间，几个时区、几种单位来回换算，点一下就复制走。10 位秒、13 位毫秒自动识别，负数时间戳也能算。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把天天要面对的时间戳换算，做成了一个打开即用的单页工具：

双向互转：「时间戳 → 日期时间」输入一串数字，「日期时间 → 时间戳」选一个本地时间，两个方向都能转。
秒/毫秒自动识别：绝对值大于等于 10¹⁰ 自动当成毫秒，否则当秒，不用自己数位数。
24 个常用时区：北京、东京、纽约、伦敦、悉尼……下拉切换，结果跟着变；还会自动猜你浏览器所在的本地时区。
实时看板：顶部每秒钟刷新一次当前时间和当前时间戳，秒、毫秒都显示。
相对时间：给一个时间戳，直接告诉你「3 小时前 / 2 天后」。
一键复制：本地时间、UTC 时间、所选时区、ISO 格式，旁边都有复制按钮，点了弹 toast 提示。
纯前端：所有计算都在浏览器本地完成，不上传服务器。

码道开通（免费体验版）

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

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

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

进入 AI 开发者空间

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

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

打开后码道 WebUI 底部输入框提示「尽管吩咐，我来帮你搞定」：

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

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「时间戳转换器」网页应用：输入 Unix 时间戳（秒或毫秒自动识别）即可与本地时间互转，也支持选择日期时间后反向生成时间戳；支持多时区切换、实时显示当前时间与当前时间戳、一键复制结果；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

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

先探测沙箱环境，发现 PYTHONHOME 指向损坏的 python3.12 会导致端口检测失败，一步步排查后改用纯 bash 的 /dev/tcp 方式找到空闲端口，启动服务时再清除 PYTHONHOME/PYTHONPATH。
在 /workspace/timestamp-converter 下创建项目目录，写出约 8KB 的单文件 index.html（最终生成 18935 字节）。
检测到 3003 端口空闲，nohup env -u PYTHONHOME -u PYTHONPATH /usr/bin/python3 -m http.server 3003 --bind 0.0.0.0 起服务，curl 自检返回 HTTP 200，再拼出内部访问地址。

代码亮点

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

1. 秒/毫秒自动识别：一个阈值就够了

输入进来先正则校验「可选负号 + 数字（可带小数）」，再用 10¹⁰ 做分界：绝对值大于等于它的当毫秒，否则当秒。10 位的秒和 13 位的毫秒天然落在这条线两边：

function parseTs(raw){
  var s = String(raw).trim();
  if(!/^-?\d+(\.\d+)?$/.test(s)) return null;
  var num = parseFloat(s);
  var isMs = Math.abs(num) >= 1e10;      // 自动识别秒/毫秒
  var ms = isMs ? num : num * 1000;
  return {ms:ms, isMs:isMs, raw:num};
}

2. 任意时区的时间：Intl + formatToParts 算偏移

不引入时区库，直接用浏览器内置的 Intl.DateTimeFormat，把日期按指定时区「拆成零件」，再拼回 UTC 时间戳做差，得到 UTC+08:00 这类偏移：

function zoneOffset(d, zone){
  var dtf = new Intl.DateTimeFormat("en-US",{
    timeZone:zone, hour12:false,
    year:"numeric",month:"2-digit",day:"2-digit",
    hour:"2-digit",minute:"2-digit",second:"2-digit"
  });
  var m = {};
  dtf.formatToParts(d).forEach(function(p){m[p.type]=p.value;});
  var asUTC = Date.UTC(+m.year, +m.month-1, +m.day, +m.hour, +m.minute, +m.second);
  var diff = asUTC - d.getTime();
  // 由差值拼出 UTC+HH:MM
}

3. 时区默认值：先猜浏览器，再兜底北京

初始化时用 Intl.DateTimeFormat().resolvedOptions().timeZone 自动拿用户本地时区，24 个预设里匹配不到才回退到北京：

var localZone = "Asia/Shanghai";
try{
  var guessed = Intl.DateTimeFormat().resolvedOptions().timeZone;
  if(guessed) localZone = guessed;
}catch(e){}
tzSelect.value = localZone;
if(tzSelect.value === "") tzSelect.value = "Asia/Shanghai";

4. 实时看板：一个 setInterval 每秒刷新

顶部两个卡片用 setInterval(tick, 1000) 保持跳动，把秒级时间戳和毫秒级时间戳一并显示，毫秒数肉眼可见地在变：

function tick(){
  var now = new Date();
  $("nowTime").textContent = fmtInZone(now, tzSelect.value, true);
  $("nowTs").textContent = Math.floor(now.getTime()/1000);
  $("nowMs").textContent = now.getTime();
}
setInterval(tick, 1000);
tick();

5. 相对时间：把时间戳翻译成「3 小时前」

差多少毫秒就套对应量级，未来时间加「后」，过去时间加「前」：

function relative(ms){
  var diff = ms - Date.now();
  var abs = Math.abs(diff), fut = diff >= 0, txt;
  if(abs < 1000) txt = "刚刚";
  else if(abs < 60000) txt = Math.round(abs/1000) + " 秒";
  else if(abs < 3600000) txt = Math.round(abs/60000) + " 分钟";
  // ... 小时 / 天 / 月 / 年
  return fut ? (txt + "后") : (txt + "前");
}

直接下载试玩

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

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

总结

时间戳转换器把「Unix 时间戳 ⇄ 本地时间」这件事收敛到一个页面上：秒/毫秒一个阈值自动区分，24 个时区用浏览器内置 Intl 硬算偏移，顶部再挂一个每秒刷新的实时看板，几个复制按钮随手带走结果。技术上主要是 Intl.DateTimeFormat.formatToParts、Date.UTC 做时区换算，以及正则 + 10¹⁰ 阈值做单位识别，纯前端零依赖。后续还可以加自定义时区搜索、多组时间对照或 URL 参数直填。

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

posted @ 2026-09-04 09:06 新科技观察员阅读(3) 评论(0) 收藏举报

刷新页面返回顶部