JavaScript生成随机数字

最新推荐文章于 2024-03-27 09:00:46 发布
最新推荐文章于 2024-03-27 09:00:46 发布
阅读量564 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript 随机数 Math对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dz13271116886/article/details/103503520
版权

工作的时候经常遇到使用一些假数据，例如数字、人名等。一个个敲太费劲，做个简单点的方法生成数字数据，喜欢的童鞋可以拿去用。

效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang=" ">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机数</title>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: #182F5D;
    }

    .box-item {
        width: 700px;
        height: 100px;
        margin-bottom: 10px;
    }

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        text-align: left;
        color: greenyellow;
    }

    .content {
        border: 1px #ccc solid;
        width: 100%;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        padding: 0 10px;
        color: #fff;
        word-wrap: break-word;
    }

    .div7 {
        height: 200px;
        width: 900px;
    }

    .div7 .content {
        height: 150px;
    }

    .check-box {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .check-box .check-item {
        width: 20%;
        height: 50px;
        float: left;
    }

    .check-box .check-item input {
        width: 50px;
        height: 20px;
    }

    .check-box .check-item option select {
        width: 50px;
        height: 20px;
    }

    .div7-content {
        width: 100%;
        height: 100px;
    }
</style>

<body>
    <div class="box">
        <div class="box-item">
            <div class="title">div1 要求（范围：0~100，个数：10，排序：不排序，重复：可重复）</div>
            <div class="content" id="div1"></div>
        </div>
        <div class="box-item">
            <div class="title">div2 要求（范围：1~100，个数：10，排序：不排序，重复：不重复）</div>
            <div class="content" id="div2"></div>
        </div>
        <div class="box-item">
            <div class="title">div3 要求（范围：1~100，个数：10，排序：升序，重复：可重复）</div>
            <div class="content" id="div3"></div>
        </div>
        <div class="box-item">
            <div class="title">div4 要求（范围：1~100，个数：10，排序：降序，重复：可重复）</div>
            <div class="content" id="div4"></div>
        </div>
        <div class="box-item">
            <div class="title">div5 要求（范围：168~200，个数：10，排序：升序，重复：不重复）</div>
            <div class="content" id="div5"></div>
        </div>
        <div class="box-item">
            <div class="title">div6 要求（范围：-168~200，个数：10，排序：升序，重复：不重复）</div>
            <div class="content" id="div6"></div>
        </div>
        <div class="box-item div7">
            <div class="title">div7 要求（自定义）</div>
            <div class="content">
                <div class="check-box">
                    <div class="check-item"> <label>最小值：</label><input type="text" id="minNumber"></div>
                    <div class="check-item"> <label>最大值：</label><input type="text" id="maxNumber"></div>
                    <div class="check-item"> <label>个数：</label><input type="text" id="math"></div>
                    <div class="check-item"> <label>排序：</label>
                        <select id="sort">
                            <option value="0">不排序</option>
                            <option value="1">升序</option>
                            <option value="2">降序</option>
                        </select>
                    </div>
                    <div class="check-item"> <label>重复：</label>
                        <select id="repeat">
                            <option value="0">可重复</option>
                            <option value="1">不重复</option>
                        </select>
                    </div>
                    <div class="check-item">
                        <button onclick="submit()">生成</button>
                        <button onclick="reset()">重置</button>
                    </div>
                </div>
                <div class="div7-content">
                    <textarea id="div7" style="width: 100%; height: 100px;border: 0;"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div id="sring"></div>
</body>
<script>
    div1();
    div2();
    div3();
    div4();
    div5();
    div6();

    function div1() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            arr[i] = (Math.floor(Math.random() * 101))
        }
        document.querySelector("#div1").innerHTML = arr;
    }

    function div2() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            let num = Math.floor(Math.random() * 100) + 1;
            if (arr.indexOf(num) === -1) { //判断数组newArr内有没有此元素
                arr.push(num);
            } else {
                i--;
            }
        }
        document.querySelector("#div2").innerHTML = arr;
    }

    function div3() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            arr[i] = (Math.floor(Math.random() * 100) + 1)
        }
        arr.sort(function (a, b) {
            return a - b
        }); //升序
        document.querySelector("#div3").innerHTML = arr;
    }

    function div4() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            arr[i] = (Math.floor(Math.random() * 100) + 1)
        }
        arr.sort(function (a, b) {
            return b - a
        }); //降序
        document.querySelector("#div4").innerHTML = arr;
    }

    function div5() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            let num = (Math.floor(Math.random() * 33) + 168)
            if (arr.indexOf(num) === -1) { //判断数组newArr内有没有此元素
                arr.push(num);
            } else {
                i--;
            }
        }
        arr.sort(function (a, b) {
            return a - b
        }); //升序
        document.querySelector("#div5").innerHTML = arr;
    }

    function div6() {
        let arr = [];
        for (i = 0; i < 10; i++) {
            let num = (Math.floor(Math.random() * 369) + (-168))
            if (arr.indexOf(num) === -1) { //判断数组newArr内有没有此元素
                arr.push(num);
            } else {
                i--;
            }
        }
        arr.sort(function (a, b) {
            return a - b
        }); //升序
        document.querySelector("#div6").innerHTML = arr;
    }

    var minNumber, maxNumber, math, sort, repeat;

    function submit() {
        minNumber = parseInt(document.querySelector("#minNumber").value); //最小值
        maxNumber = parseInt(document.querySelector("#maxNumber").value); //最大值
        math = parseInt(document.querySelector("#math").value); //数量
        sort = parseInt(document.querySelector("#sort").value); //排序
        repeat = parseInt(document.querySelector("#repeat").value); //是否重复
        let spacing = maxNumber - minNumber; //数差
        console.log('最小值:' + minNumber, '最大值:' + maxNumber, '数量:' + math, '排序:' + sort, '重复;' + repeat, '数差:' +
            spacing);
        if (repeat === 0) {
            if (checkNum(minNumber) && checkNum(maxNumber) && math > 0) {
                let arr = [];
                if (repeat === 0) {
                    for (i = 0; i < math; i++) {
                        let num = (Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber);
                        arr.push(num);
                    }
                } else if (repeat === 1) {
                    for (i = 0; i < math; i++) {
                        let num = (Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber);
                        if (arr.indexOf(num) === -1) { //判断数组newArr内有没有此元素
                            arr.push(num);
                        } else {
                            i--;
                        }
                    }
                }
                if (sort === 1) {
                    arr.sort(function (a, b) {
                        return a - b
                    });
                } else if (sort === 2) {
                    arr.sort(function (a, b) {
                        return b - a
                    });
                } else if (sort === 0) {
                    arr = arr;
                }
                document.querySelector("#div7").innerHTML = arr;
            } else {
                alert('参数有误！');
            }
        } else if (repeat === 1) {
            if (checkNum(minNumber) && checkNum(maxNumber) && math > 0 && spacing >= (math - 1)) {
                let arr = [];
                if (repeat === 0) {
                    for (i = 0; i < math; i++) {
                        let num = (Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber);
                        arr.push(num);
                    }
                } else if (repeat === 1) {
                    for (i = 0; i < math; i++) {
                        let num = (Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber);
                        if (arr.indexOf(num) === -1) { //判断数组newArr内有没有此元素
                            arr.push(num);
                        } else {
                            i--;
                        }
                    }
                }
                if (sort === 1) {
                    arr.sort(function (a, b) {
                        return a - b
                    });
                } else if (sort === 2) {
                    arr.sort(function (a, b) {
                        return b - a
                    });
                } else if (sort === 0) {
                    arr = arr;
                }
                document.querySelector("#div7").innerHTML = arr;
            } else {
                alert('参数有误！');
            }
        }
    }

    function reset() {
        document.querySelector("#minNumber").value = '';
        document.querySelector("#maxNumber").value = '';
        document.querySelector("#math").value = '';
        document.querySelector("#sort").value = 0;
        document.querySelector("#repeat").value = 0;
    }

    function checkNum(input) {
        let reg = /^-?\d+$/; //判断字符串是否为整数
        let num = input;
        return reg.test(num);
    }
</script>

</html>
柯南你好吗
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js生成指定范围的随机整数（例如0-100）
04-28
有时候想要实现通过js Math.random() 方法来实现获取指定区间的随机数。
JavaScript生成随机数
Web开发
12-15 4268
本文已在本人博客https://www.nsxsg.com/archives/32首发 文章目录JavaScript生成随机数 JavaScript生成随机数 随机数在Web开发中的运用还是十分广泛的，比如：验证码的生成、密码的生成、抽奖系统等。 预备知识 Math.random() 函数返回0和1之间的伪随机数，可能为0，但总是小于1。 生成 n-m ，包含 n 但不包含 m 的整数...
JavaScript 生成随机数
qq_43434300的博客
07-15 918
js 通过 Math（算数） 对象来实现随机数的生成。 方法 描述 ceil(x) 对数进行上舍入，即向上取整。 floor(x) 对 x 进行下舍入，即向下取整。 round(x) 四舍五入。 random() 返回 0 ~ 1 之间的随机数，包含 0 不包含 1。 Math.random() 生成 [0,1) 的数，所以 Math.random()*5 生成 {0,5) 的数。 通常期望得到整数，所以要对得到的结果处理一下。 parseInt()，Math.floor()
js随机生成数字
fhrlhh的博客
09-15 195
【代码】js随机生成数字。
JavaScript —— 生成随机数
热门推荐
HuoZhiyan 的博客
03-31 1万+
JavaScript 生成随机数
javascript自动生成包含数字与字符的随机字符串
10-24
结合这两个函数，我们可以生成一个指定长度的随机数字字符串。这里是一个简单的函数示例，用于生成一个指定长度的随机数字： ```javascript /** * 生成指定长度的随机数字字符串 * @param num 生成数字位数 */ ...
javascript生成随机密码案例
05-28
本文将详细探讨如何使用JavaScript生成随机密码，以及提供的两个案例——js1.txt和js2.txt——中可能包含的具体实现方法。 生成随机密码的功能在许多应用场景中非常有用，比如用户注册时自动生成安全的初始密码，...
JavaScript生成随机字符串的方法
10-24
本文将详细介绍如何使用JavaScript生成随机字符串。 JavaScript提供了内建的Math对象，其中包含了一些用于处理数学运算的方法和属性。在生成随机字符串的过程中，我们主要会用到Math.random()这个方法。Math.random...
Javascript点击按钮随机改变数字与其颜色
10-21
4. 随机数生成：利用`Math.random()`函数生成一个0到1之间的随机数，然后通过乘以10并取整得到0到9之间的随机数字，实现了生成随机数的功能。也可以通过`parseInt`和`Math.random()`组合来直接生成随机的多位数。 5...
javascript创建含数字字母的随机字符串方法总结
10-21
如果想创建一个含有数字、字母（大小写）或者符号的字符串，比如从[a-zA-Z0-9]集合中中创建一个随机的字符串，长度为5.有没有什么比较好的代码呢？本文提供了几种方法，包括自动改变字符集合。一起来学习下。
javascript生成随机数方法汇总
11-24
今天有又网友问到我 JavaScript 怎么生成指定范围数值随机数。Math.random() 这个方法相信大家都知道，是用来生成随机数的。不过一般的参考手册时却没有说明如何用这个方法来生成指定范围内的随机数。这次我就来详细的介绍一下Math.random()，以及如何用它来生成制定范围内的随机数。 基础教程请看这里 //www.jb51.net/w3school/js/jsref_random.htm 看完教程，应该知道Math.random()方法的基本用法了。 利用 parseInt()、Math.floor() 或者 Math.ceil()进行四舍五入处理 我们看到，直接使用M
浅谈JavaScript随机生成数
努力，学习！
07-01 981
说到javascript随机生成数，就不得不提到javascript的Math对象。 Math对象用于执行数学任务。
JavaScript随机数的应用
weixin_33915554的博客
12-05 665
JavaScript的随机数Math.random（）/返回值/ 在0（包含）和1（不包括）之间的浮点伪随机数。 ** 例子 function getRandom() {//获取0～1之间随机数 return Math.random(); } function getRandomInt(min, max) { min = Math...
JS生成随机数(多种解决方案)
欢迎光临~
05-14 5906
随机数是编程语言中的重要组成部分。在JavaScript中，生成随机数是一项简单的任务。本文将介绍生成随机数的各种方法。
JavaScript中的随机数生成详解：探讨多种生成方式
tutututu12345678的博客
01-23 435
/ 生成指定范围的随机整数通过自定义函数，我们可以根据具体需求灵活生成指定范围的随机整数。
JavaScript中获取随机数的方法
最新发布
ggq53219的博客
03-27 1616
random的用法
javascript取随机数_javaScript中的随机数方法
weixin_39827905的博客
12-19 2721
随机数方法是javaScript中经常使用的一种方法。 例如，需要在屏幕上的一个随机位置显示一幅图像，编写的小游戏要扔骰子等。javaScript中Math对象的random()方法生成0-1之间的随机数，它的随机数种子采用系统时间，因此可以基本保证每次调用random()方法时都会采用不同的伪随机数序列。下面我们对javaScript中的各种随机数方法做一个小结。基本的随机数在javaScrip...
javaScript生成随机数简便方法
FanYu1010的博客
08-11 237
1.使用Math.random()生成随机数 2.toString(36) 转换成36进制 3.然后使用slice(）截取出来 Math.random().toString(36).slice(2,10) 方法二 对定义的数组字符集进行随机选取 let str = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S'
js随机生成名字_JS实现使用Math.random()函数生成n到m间的随机数字
weixin_39633165的博客
12-03 611
Math.random()函数返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)生成n-m，包含n但不包含m的整数：第一步算出 m-n的值，假设等于w第二步Math.random()*w第三步Math.random()*w+n第四步parseInt(Math.random()*w+n, 10)生成n-m，不包含n但包含m的整数：​第一步算出 m-n的值，假设等于w第二步Math.rand...
JavaScript随机生成数字
06-01
JavaScript可以通过`Math.random()`方法来生成一个0到1之间的随机数，我们可以通过一些计算来生成我们需要的随机数。比如，我们可以使用以下代码生成一个1到10之间的随机整数： ```javascript Math.floor(Math....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值