聊聊JS里区间取随机数的方法：Math.random()和Math.floor()-工具盒子

获取某个区间的随机数，在平时的项目中经常会用到，比如我们最近做了个抽奖DEMO，比如先定义一个数，这个数是在转盘奖品的数量确定的，如果转盘转到某个位置，就可以经过判断来确定转盘相关的一些功能应用。

QQ截图20200113095552.jpg

看下DEMO片段：

function lucky_draw() {
    $("#wheels_group").attr("class", "wheels_group");
    var draw_num = Math.floor(Math.random() * 4)+1  //取1-4之间的随机数; 
    
    if(draw_num == 1) {
        draw_text = "1.2";
    }
    if(draw_num == 2) {
        draw_text = "5";
    }
    if(draw_num == 3) {
        draw_text = "1.5";
    }
    if(draw_num == 4) {
        draw_text = "2";
    }
    
    $("#draw_done_text").text(draw_text);
    setTimeout(function(){ 
        $("#wheels_group").addClass("wheels"+draw_num);
    }, 500);
    
    setTimeout(function(){ 
        $("#draw_done").fadeIn();
    
    }, 3800);
}

这只是一个简单的DEMO代码，一般draw_num是后台返回给我们的数据，我这里是取随机数，定位中奖后转盘的位置。

此应用，核心技术就是Math.random()和Math.floor()方法。首先来看下Math.random()。

Math.random()

语法

Math.random()

返回介于 0（包含） ~ 1（不包含）之间的一个随机数，简单例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家https://www.jiangweishan.com</title>
</head>
<body>

<p id="demo">点击按钮显示一个随机数</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.random();
}
</script>

</body>
</html>

大家点击看下效果。

简单了解完Math.random()，我们继续了解Math.floor()方法。

Math.floor()

定义和用法

floor() 方法返回小于等于x的最大整数。

如果传递的参数是一个整数，该值不变。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家https://www.jiangweishan.com</title>
</head>
<body>

<p id="demo">单击按钮将数值1.6下降到它的最近的整数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.floor(1.6);
}
</script>

</body>
</html>

再来一个实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家https://www.jiangweishan.com</title>
</head>
<body>

<p id="demo">单击按钮将不同的数值降到离它最近的整数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var a=Math.floor(0.60);
	var b=Math.floor(0.40);
	var c=Math.floor(5);
	var d=Math.floor(5.1);
	var e=Math.floor(-5.1);
	var f=Math.floor(-5.9);
	var x=document.getElementById("demo");
	x.innerHTML=a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f; 
}
</script>

</body>
</html>

输出结果：

是不是很简单，当我们学习完Math.random()和Math.floor()方法的应用后，我们可以把它们结合起来应用，比如取区间随机数，来个DEMO。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家https://www.jiangweishan.com</title>
</head>
<body>

<p id="demo">点击按钮显示 1 到 4 的随机数：</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var x=document.getElementById("demo")
	x.innerHTML=Math.floor((Math.random()*4)+1);
}
</script>

</body>
</html>

当然数字你随便改，试试吧。