倒计时 / 正计时

目标时刻与起始时刻双向计时,页面停留时每秒刷新。

倒计时/正计时:给一个目标时刻(datetime 选择器),或者干脆写一个偏移量——+3h30m、-2d、+1w2d 这种,按你按下的一刻换算成目标。之后每秒刷新一次大字显示,格式为「天 / 小时 / 分 / 秒」;同一时长的总周、总天、总小时、总分钟、总秒各口径收成一层折叠「累计单位(N 秒)」,展开才画那张表,而标题里的总秒数每秒都在动。页面停留期间由组件自己的 1 秒 interval 驱动,但每秒只写三样:大字行、折叠标题上的总秒数、折叠展开时才存在的那 5 个数值格——两张表的骨架、圈次行和按钮都不重建,所以在页面上选中文字、点「记一圈」都不会被刷新打断。

所有计算取系统时钟,纯本地运行;模式、目标时刻、偏移量、锚点与圈次存在本机浏览器 localStorage 的 kc-countdown 里,只在本机、不会上传;读回来先过一遍校验,不合格的那一项退回默认而不是把整页带崩。目标已经过去会自动转成「已过 xx 时长」并在提示条说明,目标在 10 年以后也会给出提醒——这么长的跨度里节假日、时区规则都可能变,数字只是参考。倒计时模式用不上圈次,那一块连「记一圈」「清空圈次」两个按钮一起不显示。

倒计时 / 正计时怎么用

  • 偏移量写法:数字紧跟单位 w(周)d(天)h(小时)m(分)s(秒),可组合,如 +1w2d3h 或 -90m;+ 开头为目标在未来,- 为过去。偏移在输入后锁定「此刻」为锚点,改动输入会重新锚定;写成解析不了的内容时页面不会停在「正在准备…」,而是退回目标时刻照常算,并在提示条点名是哪个输入有问题。
  • 正计时与圈次:切到「从起始时刻正计时」(模式那条横排按钮,按下即切换),选一个过去的时间点或点「从现在开始」,显示变为已经过了多久;运行中点「记一圈」把当前累计钉进表格,同时把折叠展开——不然只有标题上的圈数在动。「清空圈次」重来。圈次随其他设置一起进 kc-countdown,刷新后还在;但起点在未来时记下的负数圈存不进去,重新载入会被校验丢掉。圈次表把最新一圈排在最前,超过 300 圈丢最老的,表放在 220px 的滚动区里。读回来先过一遍校验(模式只认倒计时/正计时两个值、偏移量必须能解析、锚点得是有限正数、圈次只留非负整数),不合格的那一项退回默认而不是把整页带崩。
  • 多单位换算:展开「累计单位(N 秒)」就是 duration 速查:同一时长的总周/总天/总小时/总分钟/总秒并列,配合本站的时长换算工具可以把「1.43 周」再换成天。折叠收起时这些口径不占版面,只留标题那个总秒数。
  • 距今的写法:文案上都用「距今」的自然说法:目标在今天/明天/昨天会直接写「就在今天」「明天(距今 1 天)」,更远则给 N 天。

常见问题

切到别的页面它还在跑吗?

不跑。组件的每秒 interval 检测到舞台元素已脱离文档就自我清理,软导航事件也会立即停表并摘掉监听。但目标时刻、模式、偏移量与圈次存在 localStorage 的 kc-countdown 里,再回来时读回原样接着算——显示的是「目标 − 现在」,停表的这段时间照样算进去,不存在跑丢或双倍计数。interval 每秒检查元素是否还挂在文档上,软导航(页面切换、元素离开 DOM)时立刻 clearInterval 并摘掉自己的导航监听,不留幽灵计时器。

长时间运行数字会漂吗?

每次刷新都重新读取系统时钟做差,而不是累加 1 秒,所以不会累积漂移;代价是浏览器标签页被节流时中间秒不显示,但再显示的那一秒就是正确值。需要严格到毫秒的定时请写系统 cron 或用服务端任务。

目标在很远的将来会怎样?

超过约 10 年时提示条给出「远期日历语义可能变化」的提醒,数字照常计算;已经过去的目标自动按「已过」显示(即切换成正计时),这样任何时刻进入页面都有意义。

对应功能编号 #47无需安装,手机端同样可用按 Ctrl + K 换工具