90 lines
3.8 KiB
JSON
90 lines
3.8 KiB
JSON
{
|
||
"slug": "countdown",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 倒计时：容器带 role=\"timer\" 与 aria-live，脚本每秒重绘分段并在到点时换成结束文案。",
|
||
"usage": [
|
||
"容器是 .kole-countdown，带 role=\"timer\" 与 aria-live=\"polite\"，时间变化时读屏器会温和播报。",
|
||
"分段结构由脚本生成：.kole-countdown-seg 内含 .kole-countdown-num 与 .kole-countdown-label，段间是 .kole-countdown-sep。",
|
||
"天段与框架端规则一致，只有 d > 0 时才渲染，脚本用条件拼接实现。",
|
||
"到点后整体替换成 .kole-countdown-done 节点显示「活动已结束」，这是框架端没有的收尾状态。",
|
||
"计时用 setInterval 每秒调用一次 renderCountdown，示例里没有清理定时器。"
|
||
],
|
||
"bestPractices": [
|
||
"示例的 setInterval 没有 clearInterval：在单页应用里切换路由前请自行保存 timer 并清理，否则会持续重绘已移除的节点。",
|
||
"结束态是替换整块 innerHTML，要在结束时触发布局或请求请在这个分支里加，而不是继续判断数值。",
|
||
"数据来自脚本里的目标时间常量，改时间就改脚本顶部，不存在受控 prop。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-countdown 及分段、数值、标签、分隔符、结束态结构类）加 role=\"timer\" 与 aria-live 标注，渲染与计时由页内脚本负责。",
|
||
"table": [
|
||
{
|
||
"name": "kole-countdown",
|
||
"type": "基础类名",
|
||
"desc": "倒计时根容器，带 role=\"timer\" 与 aria-live=\"polite\""
|
||
},
|
||
{
|
||
"name": "kole-countdown-seg",
|
||
"type": "结构类名",
|
||
"desc": "单个时间分段（数值 + 单位）"
|
||
},
|
||
{
|
||
"name": "kole-countdown-num",
|
||
"type": "结构类名",
|
||
"desc": "补零后的两位数值"
|
||
},
|
||
{
|
||
"name": "kole-countdown-label",
|
||
"type": "结构类名",
|
||
"desc": "单位文字（天/时/分/秒）"
|
||
},
|
||
{
|
||
"name": "kole-countdown-sep",
|
||
"type": "结构类名",
|
||
"desc": "分段之间的冒号分隔符"
|
||
},
|
||
{
|
||
"name": "kole-countdown-done",
|
||
"type": "状态类名",
|
||
"desc": "倒计时结束后的替换节点，显示「活动已结束」"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "原生属性",
|
||
"desc": "容器与分段写 role=\"timer\" 声明计时语义"
|
||
},
|
||
{
|
||
"name": "aria-live",
|
||
"type": "原生属性",
|
||
"desc": "取值为 polite，让时间变化被播报"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器与数值节点都带 role=\"timer\" 与 aria-live=\"polite\"，每秒变化会被读屏器播报；若嫌播报频繁可改到分或秒的粒度。",
|
||
"结束态「活动已结束」也是 aria-live 节点，时间到会被主动念出。",
|
||
"倒计时无交互元素，不涉及键盘操作。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Countdown.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Countdown.html —— 纯 H5 演示页：容器加 1 个渲染函数负责分段拼接、结束态替换与秒级刷新"
|
||
},
|
||
{
|
||
"file": "frameworks/Countdown.css",
|
||
"kind": "样式文件",
|
||
"desc": "Countdown.css —— 本页组件类名的样式定义，由 Countdown.html 第 8 行的 <link rel=\"stylesheet\" href=\"Countdown.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"countdown-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器的计时语义与播报标注见（frameworks/Countdown.html:17）",
|
||
"结束态替换文案见（frameworks/Countdown.html:28）",
|
||
"秒级刷新定时器见（示例未清理定时器）（frameworks/Countdown.html:42）"
|
||
]
|
||
}
|