日期相差计算器：两个日期隔了多少天，距纪念日还剩几天一眼看穿

选两个日期，立刻告诉你中间隔了多少天，还顺手换算成几周、几个月、几年和一个「精确的年月日」；再填一个目标日期，是「还剩 12 天」还是「已过去 3 天」一眼看穿。今天按钮一键填好，不用自己翻日历。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「算日期差」和「倒数日」两件事并排放进同一个页面：

两个日期相差：选开始和结束日期，自动给出自然日天数，同时换算成「约 X 周 / X 个月 / X 年」。
精确年月日：不是简单除以 30，而是按日历借位算出「几年几个月几天」。
距离今天还剩几天：填一个目标日期，自动区分「还剩 N 天」「已过去 N 天」「就是今天」三种状态。
今日快捷按钮：开始日期、结束日期、目标日期三个输入框都能一键设为今天。
交换 / 清空：开始和结束日期一键对调，或一键清空重来。
一键复制：把「日期相差 + 精确间隔」的完整文字摘要复制走，弹 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 输入框粘贴以下需求，回车发送：

开发一个「日期相差计算器」网页应用：选择两个日期即可计算它们之间相差多少天（按自然日，也支持换算成周/月/年），并能输入目标日期显示距离今天还剩几天；支持今日快捷按钮、结果一键复制；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

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

先探测沙箱环境，发现 PYTHONHOME 指向损坏的 python3，依次试了 python3 / python3.11 / python3.9 都拿不到可用端口，最后改用纯 bash 的 /dev/tcp 扫描，找到空闲端口 3002。
创建 /workspace/date-diff-calculator，写出单文件 index.html（约 390 行），再检查可用的 HTTP 服务工具，发现沙箱里有 Node.js，就补了一个 41 行的 server.js 静态服务器。
用 node server.js 后台起服务并 curl 自检通过，最后拼出内部访问地址。

代码亮点

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

1. 自然日差：日期转 UTC 零点再相减

闰年、夏令时都不参与，统一把日期拼成 T00:00:00 当 UTC 零点，相减后除以一天的毫秒数再四舍五入：

function diffDays(a, b) {
  if (!a || !b) return null;
  const da = new Date(a + "T00:00:00");
  const db = new Date(b + "T00:00:00");
  if (isNaN(da) || isNaN(db)) return null;
  return Math.round((db - da) / 86400000);
}

2. 精确年月日：按日历借位，不是除以 30

「几年几个月几天」如果简单按 30 天算会差很远，这里按日历拆：先年减年、月减月、日减日，日不够向上个月借（用上个月的实际天数），月不够向年借 12：

function exactYMD(from, to) {
  let a = new Date(from + "T00:00:00");
  let b = new Date(to + "T00:00:00");
  let neg = false;
  if (a > b) { const t = a; a = b; b = t; neg = true; }
  let years = b.getFullYear() - a.getFullYear();
  let months = b.getMonth() - a.getMonth();
  let days = b.getDate() - a.getDate();
  if (days < 0) {
    months--;
    const pm = new Date(b.getFullYear(), b.getMonth(), 0);
    days += pm.getDate();
  }
  if (months < 0) { years--; months += 12; }
  return { years, months, days, neg };
}

3. 目标日期三态：还剩 / 已过去 / 就是今天

目标日期和今天做一次 diffDays，正负号和零分别映射成三种文案：

let label;
if (days === 0) label = "就是今天";
else if (days > 0) label = `还剩 ${fmtNum(abs)} 天`;
else label = `已过去 ${fmtNum(abs)} 天`;

4. 复制走的是完整文字摘要

复制按钮不是只复制一个数字，而是把「日期区间、相差天数、周/月/年近似值、精确间隔」拼成一段可直接粘贴的文本，剪贴板 API 失败还会回退到 document.execCommand("copy")。

直接下载试玩

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

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

总结

日期相差计算器把「两个日期差多少天」和「距离目标日期还剩几天」收进一个页面：自然日差用「UTC 零点相减」算，精确年月日用「按日历借位」算，目标日期三态用一个符号判断，复制功能带走完整摘要。技术上主要是 Date 的时区处理、日历借位和动态渲染。后续还可以加农历、工作日（排除周末）或节假日倒数。

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

posted @ 2026-09-05 13:37 新科技观察员阅读(41) 评论(0) 收藏举报

刷新页面返回顶部