/tags/react/林協霆醫師 (react)Hugo -- gohugo.iozh-twhttps://htl.physician.tw/favicon-32x32.pnghttps://htl.physician.tw/3232https://htl.physician.tw/favicon-32x32.pnghttps://htl.physician.tw/android-chrome-512x512.png5bbad5Sat, 28 Mar 2026 00:00:00 +0000/blog/lottery-2026-03-28/Sat, 28 Mar 2026 00:00:00 +0000/blog/lottery-2026-03-28/<h2 id="introduction引言" > <div> <a href="#introduction%e5%bc%95%e8%a8%80"> # </a> Introduction（引言） </div> </h2> <p>醫學會議、科部春酒、教學活動常需要當場進行抽獎環節，但市售線上抽獎工具往往帶有廣告、要求註冊或無法自訂風格。對於希望提供俐落視覺體驗的活動主持人，自有抽獎應用是更乾淨的選擇。本專案以 React 與 Tailwind CSS 打造一個可立即部署的抽獎介面，支援名單匯入、抽出動畫與結果保存，作為個人活動的可複用工具。</p> <h2 id="methods方法" > <div> <a href="#methods%e6%96%b9%e6%b3%95"> # </a> Methods（方法） </div> </h2> <p>實作以 TypeScript 與 React 為主，搭配 Tailwind CSS 處理樣式。功能包含：名單匯入（支援貼上、CSV）、抽出動畫（滾動效果以增加儀式感）、抽出後從名單中移除（避免重複中獎）、以及結果匯出。整體部署為靜態網站，可直接掛在 Vercel 或 Netlify。</p> <p>設計重點為「現場使用體驗」：考量到活動主持人需要在大螢幕投影下操作，介面字體偏大、按鈕反應快、抽獎動畫足以引起觀眾注意但不過分喧鬧。所有資料停留於瀏覽器本地，不上傳伺服器，符合個人化使用情境。</p> <h2 id="results結果" > <div> <a href="#results%e7%b5%90%e6%9e%9c"> # </a> Results（結果） </div> </h2> <p>工具已能在實際活動中順利運作：從導入名單到抽出多名獲獎者皆可在數十秒內完成，且視覺效果優於多數線上替代品。對於常需主持小型活動的個人或團隊，本應用提供穩定可靠的抽獎工具，且因為是自有的，能依當下主題微調樣式。</p> <h2 id="discussion討論" > <div> <a href="#discussion%e8%a8%8e%e8%ab%96"> # </a> Discussion（討論） </div> </h2> <p>本專案展現了「個人化前端工具」的價值：當特定情境的需求被反覆觸發，自有應用便比商用替代物更貼合使用習慣。限制方面，目前僅支援單輪抽獎與單一名單，多輪／多獎項仍需手動切換；抽獎隨機性以瀏覽器內建 PRNG 為主，公平度足以滿足休閒情境但非適用法規場景。未來可加入主題切換、多獎項並行抽出與聲音特效。</p> <h2 id="連結" > <div> <a href="#%e9%80%a3%e7%b5%90"> # </a> 連結 </div> </h2> <ul> <li>GitHub：<a href="https://github.com/htlin222/lottery">htlin222/lottery</a></li> <li>主要語言：TypeScript</li> <li>最後更新：2026-03-28</li> </ul>