up
down
Close
架站盒子
Web Development Box
 

JavaScript 隨機取亂數+自訂區間+不重複

│ 7559 Views │ JavaScript
JavaScript 隨機取亂數+自訂區間+不重複
JavaScript 隨機取亂數+自訂區間+不重複
  1. 認識 Math.random()
    1. Math.random() 的回傳結果
    2. Math.random()*N 的回傳結果
    3. 用 Math.floor 化為整數
    4. 從 1 開始
  2. 完整取亂數
  3. 綜合應用
  4. 隨機亂數不重覆

認識 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;
}

延伸閱讀

本文是否對您有幫助?