×

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

作者:admin2020.01.13来源:Web前端之家浏览:1083评论:1
微信公众号

微信公众号

500.jpg

获取某个区间的随机数,在平时的项目中经常会用到,比如我们最近做了个抽奖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前端之家http://www.miarww.com.cn</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前端之家http://www.miarww.com.cn</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前端之家http://www.miarww.com.cn</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>

输出结果:

0
0
5
5
-6
-6

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端之家http://www.miarww.com.cn</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>

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

总结

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/jisuan20200113.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero

时时彩平台哪个好 河北燕风采排列7开奖结果 安徽25选5开奖数据 天气网福彩3d 金博棋牌下载 福建快三购买软件 淘股吧股票论坛牛人牛贴 湖北11选5怎么看中奖 北京快3走势 胜宇配资 广东快乐10分8种玩法 北京pk计划软件安卓版 河南十一选五走势图带连线 上海天天彩选4开奖结果查询开奖结果乐彩网 内蒙古11选五5预测 双面盘定制 排列五开奖结果