JavaScript 實作大樂透/雙色球機選：紅球 1-33 不重複 6 個，藍球 1-16 單顆

需求分析

• 紅球區：從 1-33 中不重複隨機選 6 號。
• 藍球區：從 1-16 中隨機選 1 號（可與紅球重複）。
• 介面：7 個輸入框 + 1 個按鈕。

演算法：Fisher-Yates Shuffle（洗牌法）

建立陣列 [1,2,...,N]，從尾端往前隨機交換，取前 k 個即為不重複隨機組合，時間複雜度 O(N)。

完整可執行程式碼

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>大樂透機選</title><style>
  body { font-family:sans-serif; padding:20px; }
  input[type=text] { width:40px; text-align:center; margin:0 4px; font-size:1.2rem; }
  button { padding:8px 16px; font-size:1rem; cursor:pointer; }
</style></head><body>
<h3>大樂透 / 雙色球機選</h3>
<div id="red"></div>
<div id="blue" style="margin-top:8px;"></div>
<button onclick="pick()">機選一注</button>
<script>
function pick() {
  // 紅球 1-33 選 6
  const redPool = Array.from({length:33}, (_,i)=>i+1);
  const red = [];
  for (let i = redPool.length-1, k=6; k>0; i--, k--) {
    const r = Math.floor(Math.random() * (i+1));
    red.push(redPool[r]);
    redPool[r] = redPool[i];
  }
  red.sort((a,b)=>a-b); // 習慣按大小排序顯示

  // 藍球 1-16 選 1
  const blue = Math.floor(Math.random() * 16) + 1;

  // 寫入輸入框
  document.getElementById('red').innerHTML = red.map((n,i)=>
    `<input type="text" readonly value="${n}" title="紅球 ${i+1}">`
  ).join('');
  document.getElementById('blue').innerHTML =
    `<input type="text" readonly value="${blue}" style="background:#cfe; border-color:#090;" title="藍球">`;
}

// 初始化一次
pick();
</script></body></html>

關鍵點說明

1. 紅球不重複：使用洗牌法從池中取出，保證唯一性。
2. 藍球獨立：單獨 Math.random()*16+1，不受紅球影響。
3. 排序顯示：red.sort((a,b)=>a-b) 符合彩券慣例。
4. readonly 輸入框：防止使用者手動修改，語意更清晰。

常見錯誤與修正

進階：加入「機選多注」與「號碼統計」

function pickMultiple(n) {
  const results = [];
  for (let i=0; i<n; i++) {
    const red = shufflePick(Array.from({length:33},(_,i)=>i+1), 6).sort((a,b)=>a-b);
    const blue = Math.floor(Math.random()*16)+1;
    results.push({red, blue});
  }
  return results;
}
function shufflePick(arr, k) {
  const a = [...arr], res = [];
  for (let i=a.length-1; k>0; i--, k--) {
    const r = Math.floor(Math.random()*(i+1));
    res.push(a[r]); a[r]=a[i];
  }
  return res;
}