javascript取随机数_聊聊JS里区间取随机数的方法：Math.random()和Math.floor()

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

看下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(不包含) 之间的一个随机数，简单例子：html>

Web前端之家https://www.jiangweishan.com

点击按钮显示一个随机数

点我

function myFunction(){

document.getElementById("demo").innerHTML=Math.random();

}

大家点击看下效果。

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

Math.floor()

定义和用法

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

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

Web前端之家https://www.jiangweishan.com

单击按钮将数值1.6下降到它的最近的整数。

点我

function myFunction(){

document.getElementById("demo").innerHTML=Math.floor(1.6);

}

再来一个实例：html>

Web前端之家https://www.jiangweishan.com

单击按钮将不同的数值降到离它最近的整数。

点我

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 + "
" + b + "
" + c + "
" + d + "
" + e + "
" + f;

}

输出结果：0

0

5

5

-6

-6

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

Web前端之家https://www.jiangweishan.com

点击按钮显示 1 到 4 的随机数：

点我

function myFunction(){

var x=document.getElementById("demo")

x.innerHTML=Math.floor((Math.random()*4)+1);

}

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

总结

虽然本次分享内容很简单，但是应用非常广，您学会了吗？如有问题都可以咨询哦，或者加QQ群。