使用 Javascript 產生簡易版本的亂數抽籤系統。

• 先理解 Math.random() 語法。
• 再結合 Math.floor()，確保每個物件被取出的機率相同。
• 最後使用 Javascript 將對應的陣列元素顯示在指定標籤中。

Math.random() 取 0-1 之間的數字

Math.random() 會回傳介於 0 到 1 之間的隨機數字 (包含 0，但不包含 1)。

function getRandom() {
  return Math.random();
}

隨機取兩數之間的值 (不包含最大值)

回傳值大於等於 min，且小於 max。

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

Math.floor()

Math.floor() 會將小數部分捨去，回傳小於該數值的最大整數。

console.log(Math.floor(5.9999)); // 5
console.log(Math.floor(-5.05));  // -6

因此，Math.floor(Math.random() * 7)
會回傳 0 到 n-1 之間的整數 (包含 0 和 n-1)，每個數字的選中機率相等，可以用來作為抽籤。

Math.ceil()

Math.ceil() 會取大於等於該數值的最小整數。

console.log(Math.ceil(0.95)); // 1
console.log(Math.ceil(4));    // 4

取得首尾包含的隨機整數

例如：取得 5 到 9 之間的整數，包括 5 和 9。

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min);
}

隨機取出陣列中的一個元素

假設有一個陣列：

let array = ['one', 'two', 'three', 'four'];

使用以下程式碼隨機選取其中一個元素，並顯示在 HTML 標籤中：

<p id="demo0"></p>
<p id="demo1"></p>

<script>
function randomData() {
  let x = Math.floor(Math.random() * array.length);
  let y = x + 1;
  document.getElementById("demo0").innerHTML = "第幾位：" + y;
  document.getElementById("demo1").innerHTML = "中獎人：" + array[x];
}
</script>

array.length 是用來取得陣列中元素的數量，用來設定隨機取出的數量。

array.length 是用來取得陣列中元素的數量，由於陣列是從 0 開始編號，所以「第幾位」需要加一。

效果預覽及程式碼

• 效果預覽: 點此查看
• 完整程式碼: CodePen 連結

筆記同步至 HackMD。

參考資料

1. Math.random() 語法說明
2. 使用 Math.random() 的技巧