计时器
计时器显示正计时或倒计时。放到卡片上后会自动开始。
用法
在编辑器底部点加号,添加 计时器,再设置「倒计时」「起点时间戳(ms)」和「格式」。
| 目标 | 倒计时 | 倒计时时长(ms,已弃用) | 起点时间戳(ms) | 格式 |
|---|---|---|---|---|
| 正计时 | false | 可留空 | 可留空或 Date.now() | mm:ss |
| 从指定时间正计时 | false | 可留空 | 起点时间戳 | HH:mm:ss |
| 60 秒倒计时 | true | 已弃用 | Date.now() + 60000 | mm:ss |
| 5 分钟倒计时 | true | 已弃用 | 结束时间戳 | mm:ss |
| 1 小时倒计时 | true | 已弃用 | 结束时间戳 | HH:mm:ss |
属性
| 字段 | 可填写 | 说明 |
|---|---|---|
| 倒计时 | true / false | 开关打开时,「起点时间戳(ms)」表示结束时间戳 |
| 倒计时时长(ms,已弃用) | 留空 | 旧字段,不再参与显示 |
| 起点时间戳(ms) | Date.now() / ${startTime} | 正计时表示起点;倒计时表示结束时间 |
| 格式 | mm:ss / HH:mm:ss / ss | 计时显示格式 |
| 字号 | 24 / 24vp / ${size} | 文字大小。填数字时按固定视觉尺寸显示,预览和桌面卡片更一致 |
| 行高 | 24 / 28 / ${lineHeight} | 填数字时按固定视觉尺寸显示;留空时使用系统默认行高 |
| 字重 | normal / bold / medium | 按编辑器下拉选项填写 |
| 字体 | 编辑器下拉选项 | 使用指定字体 |
| 文字色 | #000000 / ${color} | 文字颜色 |
| 宽 / 高 | auto / 100 / 100% / ${w} | 计时器区域尺寸 |
| 水平偏移 / 垂直偏移 / Z 轴偏移 | 0 / 8 / ${x} | 只移动显示位置,不改变原本占位 |
| 内边距 / 外边距 | 8 / 8,8,8,8 | 四周留白 |
| 显示 | true / false / ${show} | 控制是否显示 |
| 背景色 | #FFFFFF / ${color} | 计时器背景 |
| 圆角 | 0 / 8 / 50% | 背景圆角 |
| 旋转角度 | 0 / 15 / ${angle} | 顺时针旋转角度 |
| 不透明度 | 0 到 1 | 1 为完全不透明 |
格式写法
「格式」至少包含下面一个字段:
| 写法 | 含义 |
|---|---|
HH | 小时 |
mm | 分钟 |
ss | 秒 |
SS | 厘秒 |
常用格式:
mm:ss
HH:mm:ss
ss
例:5 分钟倒计时
在 JS 中生成 5 分钟后的结束时间戳:
const startTime = Date.now() + 5 * 60 * 1000
| 字段 | 填写 |
|---|---|
| 倒计时 | true |
| 起点时间戳(ms) | ${startTime} |
| 格式 | mm:ss |
| 字号 | 28 |
例:正计时
| 字段 | 填写 |
|---|---|
| 倒计时 | false |
| 格式 | mm:ss |
「倒计时时长(ms,已弃用)」可以留空。
例:秒级时钟
把「起点时间戳(ms)」设为当天 00:00:00 的时间戳,并使用 HH:mm:ss:
const now = new Date()
const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
| 字段 | 填写 |
|---|---|
| 倒计时 | false |
| 起点时间戳(ms) | ${startTime} |
| 格式 | HH:mm:ss |
「起点时间戳(ms)」固定为起点,组件会用当前时间减去它来显示已过时间。这样即使系统后台暂停绘制,重新可见后也会按当前时间补齐;到 24 小时后回到 00:00:00。
注意事项
倒计时最多显示 24 小时
倒计时结束时间超过当前时间 24 小时时,显示会截断到 24 小时;结束时间已过时显示 00:00:00。
不需要 JS 刷新
计时器自己计时,不用在 JS 里写 setUpdateFreq。设置「起点时间戳(ms)」后,组件重新可见时会按当前时间计算显示值。