語音智能時鐘
以 zh-TW 語音辨識控制的七段顯示智能時鐘（QuickUI 0.6.2）：顯示時間、日期、年份、秒數並可語音計時。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2024-12-20 |
| 分類 | App 與平台範例 |
| HTML 檔案 | index.html |
| 原始碼 | target/20241220 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 時鐘 | 四個 div.number（各 7 個 span 段）加 div.colon；依 data-value 顯示數字。 |
| 說明 | 列出支援指令：顯示當前日期／年份／時間／秒數、計時xx分鐘、計時xx秒。 |
互動行為
- 於 QUI when.rendered：若無 webkitSpeechRecognition 則 alert('此瀏覽器不支援語音識別功能')；否則啟動 zh-TW 連續辨識（含 interim 結果）。
- onresult 防抖 500ms 後比對關鍵字：現在／當前時間 → setTime、年份 → setYear、日期 → setDate、秒數 → setSec（各以 setInterval 每秒更新）。
- 「計時N分鐘」／「計時N秒」以 regex 解析並啟動 setCountDown；「停止」停止；其他 2 字以上語音及 onerror／onend 顯示表情（setFace：眼睛與嘴巴）。
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| QuickUI (@pardnchiu/quickui) | 0.6.2 | https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans / Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet linked |
| Web Speech API (webkitSpeechRecognition) | - | browser built-in |
樣式
| 項目 | 內容 |
|---|---|
| SCSS 入口 | sass/index.scss |
| 輸出 CSS | css/index.css |
| Partials | _init.scss, function/_hsbTohsl.scss |
_init 為 reset；function/_hsbTohsl 提供 hsb()／hsba()。index.scss 以 --width: calc(100vw / 40)、--height、--triHeight 決定時鐘尺寸，依 [data-value]（0-9、'-'、eye，冒號的 mouth/none）切換各段透明度。
cd target/20241220
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- 純 CSS 七段數字：依 [data-value] 屬性選擇器顯示 span:nth-child 段；以 CSS 變數做視窗相對尺寸。
- JS 只寫入 element.dataset.value，不重建 DOM。
- Web Speech API 搭配 setTimeout 防抖與 setInterval 更新；以 regex 擷取計時長度。
外部資源
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20241220.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20241220
