[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"portfolio-lucky-draw-html":3},{"id":4,"title":5,"body":6,"category":97,"cover":98,"date":99,"description":100,"extension":101,"featured":102,"links":103,"meta":106,"navigation":107,"path":108,"seo":109,"status":110,"stem":111,"tags":112,"__hash__":118},"portfolio\u002Fportfolio\u002Flucky-draw-html.md","幸運抽獎工具",{"type":7,"value":8,"toc":89},"minimark",[9,14,18,21,24,64,67,74,77,80,83,86],[10,11,13],"h2",{"id":12},"為什麼做這個","為什麼做這個？",[15,16,17],"p",{},"為了公司某單位要辦抽獎活動打造。做成單一 HTML 檔，不需要安裝、不需要伺服器，丟給任何人都能直接用瀏覽器打開。",[15,19,20],{},"原本只是臨時幫忙，沒想到後來真的拿去辦活動，感覺還挺不錯的。",[10,22,23],{"id":23},"功能",[25,26,27,40,46,52,58],"ul",{},[28,29,30,34,35,39],"li",{},[31,32,33],"strong",{},"公平抽獎","：Fisher-Yates 洗牌演算法 + ",[36,37,38],"code",{},"crypto.getRandomValues()","（密碼學安全的隨機數，符合 NIST SP 800-90A）",[28,41,42,45],{},[31,43,44],{},"客製化","：活動標題、LOGO、背景色、強調色，全部可以在設定模式調整",[28,47,48,51],{},[31,49,50],{},"抽獎動畫","：名字滾動效果，增加緊張感（可關閉）",[28,53,54,57],{},[31,55,56],{},"歷史紀錄","：自動保存最近 9 筆，可還原",[28,59,60,63],{},[31,61,62],{},"資料持久化","：設定、名單、結果存在 localStorage，重新整理不會消失",[10,65,66],{"id":66},"技術說明",[15,68,69,70,73],{},"零依賴、零 npm、零後端。整個工具就是一個 ",[36,71,72],{},".html"," 檔案，所有 CSS 和 JS 都 inline 在裡面。",[15,75,76],{},"為了讓同事放心「結果是真的隨機」，README 裡特別寫了一份資安審查說明——解釋演算法公平性、隨機數來源、以及「程式不會發送任何網路請求」。",[10,78,79],{"id":79},"心得",[15,81,82],{},"有時候最快的解法，反而是最有用的解法。",[15,84,85],{},"這個工具從想法到可用版本很快就完成了，沒有框架、沒有打包工具、沒有 CI\u002FCD。但它解決了一個真實的問題，而且解決得夠好——對方用了之後反映「很好用」。",[15,87,88],{},"這個經驗讓我更相信：工具的價值在於它是否解決了真實問題，而不是用了多少技術。",{"title":90,"searchDepth":91,"depth":91,"links":92},"",2,[93,94,95,96],{"id":12,"depth":91,"text":13},{"id":23,"depth":91,"text":23},{"id":66,"depth":91,"text":66},{"id":79,"depth":91,"text":79},"experiment","\u002Fimages\u002Fportfolio\u002Flucky-draw-html.png","2026-01-18T00:00:00.000Z","一個單一 HTML 檔案的公平抽獎工具。發現公司某單位有需求，臨時幫忙做的，意外地受到重視，真的拿去辦活動用了。","md",false,{"website":104,"github":105},"https:\u002F\u002Fharry18456.github.io\u002Flucky-draw-html\u002Flucky-draw.html","https:\u002F\u002Fgithub.com\u002Fharry18456\u002Flucky-draw-html",{},true,"\u002Fportfolio\u002Flucky-draw-html",{"title":5,"description":100},"active","portfolio\u002Flucky-draw-html",[113,114,115,116,117],"HTML","CSS","JavaScript","Web Crypto API","零依賴","iqHFL4IjrSd1tVpmQXicV8XnZitnGeMgoxsoHE5u0G8",1774434898167]