[JavaScript] Math 數學運算
Math物件
JavaScript的Math物件可以執行方法做數學的運算。
Math.round( )
Math.round(x) : 將x四捨五入到整數。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.4);
</script>
</body>
</html>
Math.round(4.4) 將4.4四捨五入為4。
Math.pow( )
Math.pow(x,y) : 返回x的y次方。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.pow(7,2);
</script>
</body>
</html>
Math.pow(7,2) 返回7的2次方,即為7X7=49。
Math.sqrt( )
Math.sqrt( ) : 返回x的平方根。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.sqrt(49);
</script>
</body>
</html>
Math.sqrt(49) 表示49的平方根,即為\( \sqrt 49 \)=7。
Math.abs( )
Math.abs(x) : 將x轉成正數。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.abs(-1.23);
</script>
</body>
</html>
Math.abs(-1.23) 將數字-1.23轉回正數1.23。
Math.ceil( )
Math.ceil(x) : 將x往上加到整數。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.ceil(1.23);
</script>
</body>
</html>
Math.ceil(1.23) 將數字1.23往上計算到整數2。
Math.floor( )
Math.floor(x) : 將x往下減到整數。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.floor(1.9);
</script>
</body>
</html>
Math.floor(1.9) 將數字1.9往下計算到整數1。
Math.min( )
Math.min() : 找出參數列表中最小的值。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.min(1,0,15,200,100);
</script>
</body>
</html>
Math.min(1,0,15,200,100) 返回參數列表中最小的數字0。
Math.max( )
Math.max() : 找出參數列表中最大的值。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max(1,0,15,200,100);
</script>
</body>
</html>
Math.max(1,0,15,200,100) 返回參數列表中最大的數字200。
Math.random( )
Math.random() : 返回0(包含)和1(不包含)之間的隨機數字。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>
Math.random() 返回一個隨機的浮點數,介於0~1之間,大於等於0、小於1。
random( ) 返回整數
由於Math.random()只會回傳0到1之間的隨機小數點,可以用Math.random()與Math.floor()方法返回隨機整數。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.floor(Math.random()*10);
</script>
</body>
</html>
原本的Math.random()方法會返回0~1的浮點數。顯示0.0000000000000000~0.9999999999999999。
Math.random()*10 將random()方法返回的浮點數乘以10。顯示0.0000000000000000~9.9999999999999999。
Math.floor(Math.random()*10) 將乘上10的隨機數字用floor()方法往下計算到整數。顯示0~9。
上面的例子返回0~9的隨機整數,若要返回1~10的隨機整數,只需要在最後面加上1即可:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.floor(Math.random()*10)+1;
</script>
</body>
</html>
原本的Math.random()方法會返回0~1的浮點數。顯示0.0000000000000000~0.9999999999999999。
Math.random()*10 將random()方法返回的浮點數乘以10。顯示0.0000000000000000~9.9999999999999999。
Math.floor(Math.random()*10) 將乘上10的隨機數字用floor()方法往下計算到整數。顯示0~9。
Math.floor(Math.random()*10)+1 將返回的0~9隨機整數最後再加上1。顯示1~10。
使用Function返回隨機數字
將Math.random()與Math.floor()方法寫進function來返回隨機的數字。
從兩個數字中隨機取一個整數,最小數(包含)~最大數(不包含):
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function random(min,max)
{
return Math.floor(Math.random() * (max - min)) + min;
}
document.getElementById("demo").innerHTML = random(0, 10);
</script>
</body>
</html>
function random(min,max) 定義一個function名為getRandomNumber,有參數min與max。
return Math.floor(Math.random() * (max - min)) + min 返回隨機數字乘上(max-min),並用floor()方法往下計算到整數,最後再加上min。
getRandomNumber(0, 10) 即為Math.floor(Math.random() * (10- 0)) + 0,相當於Math.floor(Math.random()*10)。顯示0~9。
從兩個數字中隨機取一個整數,最小數(包含)~最大數(包含):
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function getRandomNumber(min,max)
{
return Math.floor(Math.random() * (max - min+1)) + min;
}
document.getElementById("demo").innerHTML = getRandomNumber(1, 10);
</script>
</body>
</html>