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

打开网页顶部就每秒刷新「当前时间 当前时间戳秒/毫秒」下面一边输入 Unix 时间戳、一边选个日期时间几个时区、几种单位来回换算点一下就复制走。10 位秒、13 位毫秒自动识别负数时间戳也能算。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。这个工具做什么它把天天要面对的时间戳换算做成了一个打开即用的单页工具双向互转「时间戳 → 日期时间」输入一串数字「日期时间 → 时间戳」选一个本地时间两个方向都能转。秒/毫秒自动识别绝对值大于等于 10¹⁰ 自动当成毫秒否则当秒不用自己数位数。24 个常用时区北京、东京、纽约、伦敦、悉尼……下拉切换结果跟着变还会自动猜你浏览器所在的本地时区。实时看板顶部每秒钟刷新一次当前时间和当前时间戳秒、毫秒都显示。相对时间给一个时间戳直接告诉你「3 小时前 / 2 天后」。一键复制本地时间、UTC 时间、所选时区、ISO 格式旁边都有复制按钮点了弹 toast 提示。纯前端所有计算都在浏览器本地完成不上传服务器。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 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 位的毫秒天然落在这条线两边functionparseTs(raw){varsString(raw).trim();if(!/^-?\d(\.\d)?$/.test(s))returnnull;varnumparseFloat(s);varisMsMath.abs(num)1e10;// 自动识别秒/毫秒varmsisMs?num:num*1000;return{ms:ms,isMs:isMs,raw:num};}2. 任意时区的时间Intl formatToParts 算偏移不引入时区库直接用浏览器内置的Intl.DateTimeFormat把日期按指定时区「拆成零件」再拼回 UTC 时间戳做差得到UTC08:00这类偏移functionzoneOffset(d,zone){vardtfnewIntl.DateTimeFormat(en-US,{timeZone:zone,hour12:false,year:numeric,month:2-digit,day:2-digit,hour:2-digit,minute:2-digit,second:2-digit});varm{};dtf.formatToParts(d).forEach(function(p){m[p.type]p.value;});varasUTCDate.UTC(m.year,m.month-1,m.day,m.hour,m.minute,m.second);vardiffasUTC-d.getTime();// 由差值拼出 UTCHH:MM}3. 时区默认值先猜浏览器再兜底北京初始化时用Intl.DateTimeFormat().resolvedOptions().timeZone自动拿用户本地时区24 个预设里匹配不到才回退到北京varlocalZoneAsia/Shanghai;try{varguessedIntl.DateTimeFormat().resolvedOptions().timeZone;if(guessed)localZoneguessed;}catch(e){}tzSelect.valuelocalZone;if(tzSelect.value)tzSelect.valueAsia/Shanghai;4. 实时看板一个 setInterval 每秒刷新顶部两个卡片用setInterval(tick, 1000)保持跳动把秒级时间戳和毫秒级时间戳一并显示毫秒数肉眼可见地在变functiontick(){varnownewDate();$(nowTime).textContentfmtInZone(now,tzSelect.value,true);$(nowTs).textContentMath.floor(now.getTime()/1000);$(nowMs).textContentnow.getTime();}setInterval(tick,1000);tick();5. 相对时间把时间戳翻译成「3 小时前」差多少毫秒就套对应量级未来时间加「后」过去时间加「前」functionrelative(ms){vardiffms-Date.now();varabsMath.abs(diff),futdiff0,txt;if(abs1000)txt刚刚;elseif(abs60000)txtMath.round(abs/1000) 秒;elseif(abs3600000)txtMath.round(abs/60000) 分钟;// ... 小时 / 天 / 月 / 年returnfut?(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?sourcedmzntgwsfsourceaddmzntgwwbwz