# 語音智能時鐘

以 zh-TW 語音辨識控制的七段顯示智能時鐘（QuickUI 0.6.2）：顯示時間、日期、年份、秒數並可語音計時。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2024-12-20 |
| 分類 | App 與平台範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20241220](https://github.com/pardnio/demo-web/tree/main/target/20241220) |

## 即時預覽

<iframe src="/target/20241220/" title="語音智能時鐘" loading="lazy" allow="microphone" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/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）切換各段透明度。

```bash
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

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)