辯論賽倒計時系統 - 專業版

一個功能完整的專業辯論賽倒計時系統，支持多階段計時、毫秒級精準倒計時、超時警示等高級功能。

PS：瀏覽器直接打開 html 即可使用！

【Little Tools】-- 辯論賽倒計時系統_前端

【Little Tools】-- 辯論賽倒計時系統_重置_02

✨ 核心功能特點

1. 多階段計時

  • ✅ 支持立論、駁立論、質詢、自由辯論、總結等多個環節
  • ✅ 各環節時間可自定義設置
  • ✅ 實時顯示當前階段名稱

2. 精準倒計時

  • ✅ 毫秒級精準計時（每10毫秒更新一次）
  • ✅ 顯示格式：MM:SS.MS（分鐘:秒.毫秒）
  • ✅ 確保時間公正準確

3. 階段性提示

  • ✅ 視覺提醒：剩餘10秒、5秒時背景變黃閃爍
  • ✅ 聽覺提醒：剩餘10秒、5秒時播放提示音
  • ✅ 超時時紅色閃爍 + 語音警告

4. 總時長控制

  • ✅ 可設置每隊總髮言時間限制
  • ✅ 實時顯示總剩餘時間
  • ✅ 剩餘1分鐘時顯示警告

5. 超時警示

  • ✅ 視覺警示：超時後背景紅色閃爍
  • ✅ 聽覺警示：超時後播放警告音
  • ✅ 倒計時數字變紅並放大閃爍

6. 暫停/繼續/重置

  • ✅ 暫停：隨時暫停當前計時
  • ✅ 繼續：從暫停處繼續計時
  • ✅ 重置：重置當前階段時間
  • ✅ 全部重置：重置所有數據和統計

7. 發言次數管理

  • ✅ 自由辯論環節自動記錄發言次數
  • ✅ 點擊按鈕增加發言次數
  • ✅ 實時顯示在界面上

8. 自定義規則和賽制

  • ✅ 可自定義各階段時間設置
  • ✅ 可設置總時長限制
  • ✅ 支持不同賽制（四辯/三辯等）

9. 數據記錄與統計

  • ✅ 記錄各隊各環節用時
  • ✅ 記錄總用時統計
  • ✅ 查看統計數據面板

10. 用户界面優化

  • ✅ 大字體顯示：倒計時數字超大，清晰可見
  • ✅ 高對比度：正方紅色、反方黑色，對比鮮明
  • ✅ 階段明確：頂部顯示當前階段
  • ✅ 響應式設計：支持PC端和大屏幕顯示

🚀 使用方法

方式一：直接打開（推薦）

最簡單的方式：直接雙擊打開 standalone.html 文件，即可在瀏覽器中使用。

無需安裝任何依賴，無需啓動服務器，打開即用！

方式二：使用開發服務器

如果需要使用開發版本（支持熱更新）：

  1. 安裝依賴

npm install

  1. 啓動開發服務器

npm run dev

然後在瀏覽器中打開顯示的本地地址（通常是 http://localhost:5173）

  1. 構建生產版本

npm run build

構建完成後，可以在 dist 目錄中找到生產版本的文件。

📖 使用説明

基本操作

  1. 選擇階段：點擊頂部的階段按鈕（立論、駁立論、質詢、自由辯論、總結）
  2. 開始計時：點擊"開始"按鈕開始倒計時
  3. 暫停計時：點擊"暫停"按鈕暫停當前計時
  4. 繼續計時：暫停後點擊"繼續"按鈕繼續計時
  5. 結束階段：點擊"結束"按鈕結束當前階段並記錄用時
  6. 重置階段：點擊"重置"按鈕重置當前階段時間
  7. 全部重置：點擊"全部重置"按鈕重置所有數據和統計

高級功能

  1. 設置階段時間：
  • 點擊右上角"⚙️ 設置"按鈕
  • 修改各階段的時間（單位：秒）
  • 設置總時長限制（單位：分鐘）
  • 點擊"保存"應用設置
  1. 查看統計：
  • 點擊右上角"📊 統計"按鈕
  • 查看正方和反方的總用時統計
  1. 自由辯論發言次數：
  • 在自由辯論階段，點擊"發言次數"按鈕記錄每次發言
  • 發言次數會顯示在右下角
  1. 快速設置時間：
  • 在未運行時，可以點擊快速設置按鈕（3分鐘、5分鐘、10分鐘）
  • 快速設置當前階段的時間

提示和警告

  • 10秒提示：剩餘10秒時，背景變黃，播放提示音
  • 5秒提示：剩餘5秒時，背景變黃，播放提示音
  • 超時警告：超時後，背景紅色閃爍，播放警告音，數字變紅
  • 總時長警告：總剩餘時間不足1分鐘時，顯示警告圖標

🎨 界面説明

  • 左側面板：正方（紅色背景）
  • 右側面板：反方（黑色背景）
  • 頂部顯示：當前階段名稱（如"正方 - 立論"）
  • 中間顯示：大號倒計時（MM:SS.MS格式）
  • 底部顯示：控制按鈕和快速設置

🔧 技術棧

  • React 18
  • Vite 5
  • Web Audio API（用於提示音）
  • 純CSS樣式（無UI框架依賴）

📁 項目結構

倒計時/
├── standalone.html      # 獨立HTML文件（可直接打開，推薦使用）
├── src/
│   ├── App.jsx          # 主應用組件
│   ├── App.css          # 應用樣式
│   ├── main.jsx         # 入口文件
│   └── index.css        # 全局樣式
├── index.html           # HTML模板（需要開發服務器）
├── package.json         # 項目配置
├── vite.config.js       # Vite配置
├── 開發需求描述.md      # 需求文檔
└── README.md           # 項目説明

⚠️ 注意事項

  • 本項目不需要數據庫，所有狀態都在瀏覽器中管理
  • 刷新頁面會重置所有狀態（統計數據會丟失）
  • 倒計時到0時會自動停止並觸發超時警告
  • 音頻功能需要瀏覽器支持 Web Audio API
  • 建議使用現代瀏覽器（Chrome、Firefox、Safari、Edge）

🎯 適用場景

  • 辯論賽計時
  • 演講比賽計時
  • 會議發言計時
  • 任何需要精確計時的場景

📝 更新日誌

v2.0.0 (專業版)

  • ✨ 新增多階段計時功能
  • ✨ 新增毫秒級精準倒計時
  • ✨ 新增階段性提示（視覺+聽覺）
  • ✨ 新增總時長控制
  • ✨ 新增超時警示（閃爍+語音）
  • ✨ 新增暫停/繼續功能
  • ✨ 新增發言次數管理
  • ✨ 新增自定義規則設置
  • ✨ 新增數據統計功能
  • 🎨 優化UI界面設計

v1.0.0 (基礎版)

  • ✅ 基礎倒計時功能
  • ✅ 正反方分屏顯示
  • ✅ 開始/結束控制

如有需要：請留言發送源碼，瀏覽器打開直接使用即可！