認識 Math.random()
JavaScript 中的Math.random()函式可以回傳一個隨機數字，但其數字僅介於 0 ~ 1 之間，而不大於 1 ，如果希望從 1 ~ xx 中隨機抽數字，則需要再多一些步驟去調整它，我們先看Math.random()回傳的結果。
Math.random() 的回傳結果
console.log(Math.random()); // 回傳 0.2831786194514101
如果需要大於 1 ，則需要乘以 2 以上的數字，我們來看以下範例：
Math.random()*N 的回傳結果
console.log(Math.random()*2); // 回傳 0.00...1 ~ 0.99...99
console.log(Math.random()*3); // 回傳 0.00...1 ~ 1.99...99
console.log(Math.random()*10); // 回傳 0.00...1 ~ 9.99...99
用 Math.floor 化為整數
通常我們還需要化為整數，可以使用Math.floor函式，它會回傳小於或等於所給的數字之最大整數，例如：
console.log(Math.floor(2.85)); // 回傳 2
console.log(Math.floor(2.05)); // 回傳 2
console.log(Math.floor(2)); // 回傳 2
console.log(Math.floor(-2.05)); // 回傳 -3
接下來我們把Math.random()包在Math.floor()裡面就能得到亂數整數。
console.log(Math.floor(Math.random()*2)); // 回傳 0 或 1
console.log(Math.floor(Math.random()*3)); // 回傳 0 ~ 2
console.log(Math.floor(Math.random()*10)); // 回傳 0 ~ 9
從 1 開始
由於預設是從 0 開始計算，因此如果乘以 10，表示從 0 ~ 9（共 10 個數字之中）取出亂數。如果希望是從 1 到 10 ，只要在取出結果後加 1 即可，我們看看以下的完整範例。
完整取亂數
現在我們做一個 function。
// 設置亂數規則
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
console.log(getRandomInt(10) + 1); // 回傳 1~10
到此我們已經成功做出區間亂數，現在我們再來看看實際運用的例子，以下是讓使用者選擇範圍區間，並回應該區間的隨機數字。
綜合應用
現在我們來做一個可以讓使用者選擇範圍的亂數，你可以用input讓使用者自訂數字，在這裡我們用select選單作範例。
HTML
<select id="randomNum">
<option value="10">1~10</option>
<option value="50">1~50</option>
<option value="100">1~100</option>
<option value="200">1~200</option>
<option value="1000">1~1000</option>
</select>
<button onclick="goRandom()">Go</button>
結果：<span id="randomResult"></span>
JavaScript
//設置亂數規則
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
//當按下按鈕時
function goRandom() {
//取得使用者選擇的數字範圍
randomNum = document.getElementById("randomNum").value;
//取得該數字範圍的亂數
r = getRandomInt(randomNum)+1;
//回傳到 HTML 該亂數值
document.getElementById("randomResult").innerHTML= r;
}
呈現結果
請選擇數字範圍，選好後按下「Go」按鈕：
結果
隨機亂數不重覆
當隨機數字跟上一個相同時會顯得好像按鈕沒反應，如果我們不希望隨機數字跟上一個相同，可以做數字紀錄，將新亂數跟舊亂數比對，如果重複就重抽。
//設置亂數規則
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
var l = 0; //宣告紀錄值
//當按下按鈕時
function goRandom() {
//取得使用者選擇的數字範圍
randomNum = document.getElementById("randomNum").value;
//取得該數字範圍的亂數
r = getRandomInt(randomNum)+1;
//判斷是否重複
switch(true){
case r==l: //如果亂數值等於紀錄值
goRandom(); //重新取亂數
break;
default: //如果亂數值不等於紀錄值
l = r; //更新紀錄值
break;
}
//回傳到 HTML 該亂數值
document.getElementById("randomResult").innerHTML= r;
}
本文是否對您有幫助？