一篇文章带你了解JavaScript随机数

开发 前端
今天我们一起来带你了解一下JavaScript随机数都有哪些。

一、Math.random()

Math.random() 返回0到1之间的随机数(包括0,不包括1)。

语法:

Math.random();            // returns a random number
代码:
<!DOCTYPE html>
<html>
    <title>项目</title>


    <body style="background-color: aqua;">
        <h1>JavaScript Math.random()</h1>


        <p>单击按钮以显示0(含)和1(不含)之间的随机数:</p>


        <button onclick="myFunc()">Click</button>


        <p id="result"></p>


        <script>
            function myFunc() {
                document.getElementById('result').innerHTML = Math.random();
            }
</script>


    </body>
</html>

Math.random() 总是返回小于1的数字。

图片

二、JavaScript 随机整数

Math.random() 和 Math.floor() 一起使用,可以返回一个随机整数。

案例1:返回一个从0到9的随机整数

Math.floor(Math.random() * 10);     // returns a number between 0 and 9
代码:
<!DOCTYPE html>
<html>
    <title>项目</title>


    <body style="background-color: aqua;">


        <p>单击按钮以显示0到9之间的随机数:</p>


        <button onclick="myFunc()">Click</button>


        <p id="result"></p>


        <script>
            function myFunc() {
                let x = Math.floor(Math.random() * 11);
                document.getElementById("result").innerHTML = x; // 下面代码依次替换相对于的js代码,实现以下效果
            }
</script>


    </body>

图片图片

案例2:返回一个从0到99的随机整数

Math.floor(Math.random() * 100);     // returns a number between 0 and 9

图片

案例3:返回一个从0到100的随机整数

Math.floor(Math.random() * 101);     // returns a number between 0 and 10

图片

案例4:返回一个从11到20的随机整数

Math.floor((Math.random() * 10) + 11);  // returns a number between 11 and 20

图片

案例5:返回一个从1到100的随机整数

Math.floor(Math.random() * 100) + 1; // returns a number between 1 and 100

图片

三、恰当随机函数(min(包括)和max(排除)之间)。

上面的例子中看到的,创建一个合适的随机函数用于所有的随机整数可能是个好主意。

JavaScript函数总是返回一个随机数在min(包括)和max(排除)之间:

<!DOCTYPE html>
<html>
  <title>项目</title>


  <body style="background-color: aqua;">


    <p>单击按钮以显示0到9之间的随机数:</p>


    <button onclick="myFunc()">Click</button>


    <p id="result"></p>


    <script>
      function myFunc() {
        document.getElementById("result").innerHTML = getRandom(0, 10);
      }


      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }
</script>


  </body>
</html>

图片

JavaScript函数总是返回一个随机数在min(包括)和max(包括)之间:

<!DOCTYPE html>
<html>
  <title>项目</title>
 
  <body style="background-color: aqua;">


    <p>单击按钮以显示0到10之间的随机数:</p>


    <button onclick="myFunc()">Click</button>


    <p id="result"></p>


    <script>
      function myFunc() {
        document.getElementById("result").innerHTML = getRandom(0, 10);
      }


      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
</script>


  </body>
</html>

图片图片

四、总结

本文主要介绍了JavaScript 随机数(Random)函数的应用,介绍了如何去取一个区间的随机数,以及随机整数。通过用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

责任编辑:华轩 来源: 前端进阶学习交流
相关推荐

2023-03-28 15:11:00

JavaScript随机数应用

2021-06-11 08:58:09

JavaScript随机数应用

2021-01-29 18:41:16

JavaScript函数语法

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2023-07-30 15:18:54

JavaScript属性

2021-01-26 23:46:32

JavaScript数据结构前端

2024-01-30 13:47:45

2021-03-09 14:04:01

JavaScriptCookie数据

2024-04-19 14:23:52

SwitchJavaScript开发

2021-06-24 09:05:08

JavaScript日期前端

2021-03-05 18:04:15

JavaScript循环代码

2023-06-06 15:45:40

JavaScript数组

2021-11-26 11:10:07

JavaScript 节点导航

2021-04-20 11:20:24

Java开发运算符

2023-07-25 16:06:57

JavaScript对象

2023-08-27 15:18:17

JavaScriptRegExp
点赞
收藏

51CTO技术栈公众号