JavaScript生成随机数字

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

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

<!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>
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页