利用JS实现随机数的生成以及几组随机数的生成

最新推荐文章于 2023-12-13 15:34:56 发布

SpASum

最新推荐文章于 2023-12-13 15:34:56 发布

阅读量943

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_61853901/article/details/126466359

版权

一、首先就是小白一位，刚把Javascript基础学完。大佬勿喷......

二、Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机抽取号码</title>
</head>
<link rel="stylesheet" href="./css/main.css">
<body>
<div id="titleDiv">
    <h1>随机号码抽取</h1>
</div>
<div id="userDiv">
    <ul>
        <li><input type="text" id="beforeNum" placeholder="输入从几开始"></li>
        <li><span>~</span></li>
        <li><input type="text" id="afterNum" placeholder="输入从几结束"></li>
    </ul>
</div>

<br>

<div id="btnDiv">
    <button id="userBtn">生成随机一个范围内数字</button>

    <input type="text" id="userNumArr" placeholder="输入你需要生成几组随机数">

    <button id="userBtnTwo">生成随机几组范围内数字</button>
</div>

<br>

<div id="userArrNum">
    <ul>

    </ul>
</div>


<script src="./js/index.js"></script>
</body>
</html>

三、CSS

*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
#titleDiv{
    display: flex;
    justify-content: center;
    align-items: center;
}
#userDiv{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#userDiv ul{
    display: flex;
 }
#btnDiv{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
#userArrNum{
    display: flex;
    justify-content: center;
    align-items: center;
}
#userArrNum ul{
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

css均用的是flex布局，gap属性可能不支持某个内核或是IE版本，我也不知道不支持那个......如果您使用时发现两个元素的间距没有拉开，那应该就是不支持gap这个属性了.

四、Javascript

const btn = document.getElementById('userBtn');
const btnTwo = document.getElementById('userBtnTwo');
const userNumArr = document.getElementById('userNumArr');
const beforeNum = document.getElementById('beforeNum');
const afterNum = document.getElementById('afterNum');
const userDisplayUl = document.querySelectorAll('#userArrNum ul');
const regNum = /^\d+$/;
let userArrNum = [];
let timer;

function randomNum(min, max) {
    const num = Math.floor(Math.random() * (max - min + 1)) + min;
    return num;
}

function userRandomNum(){
    const result = randomNum(+beforeNum.value, +afterNum.value);
    alert('随机的结果是' + result);
}

function arrNum(){
    timer = setInterval(function (){
        const result = randomNum(+beforeNum.value , +afterNum.value);
        userArrNum.push(result);
        if(userArrNum.length >= +userNumArr.value){
            clearInterval(timer);
            let sysArr = userArrNum;
            for(let i = 0;i < sysArr.length;i++){
                let li = document.createElement('li');
                li.innerText = sysArr[i];
                userDisplayUl[0].appendChild(li);
            }
            console.log(sysArr);
        }
    },1);
}

btn.onclick = function () {
    if(!regNum.test(beforeNum.value) && !regNum.test(afterNum.value)){
        alert('您没有输入或是您输入的不是一个数字');
    }else{
        userRandomNum();
    }
};

btnTwo.onclick = function (){
    if(!regNum.test(beforeNum.value) && !regNum.test(afterNum.value)){
        alert('您没有输入或是您输入的不是一个数字');
    }else {
        if(!regNum.test(userNumArr.value)){
            alert('您没有输入或是您输入的不是一个数字');
        }else{
            arrNum();
        }
    }
};

这个实现的方法可能不是最简单的方法，也可能使用过程中会出现好多Bug......但是确实是我自己的一个思路：

首先生成随机数就不用说了floor取整random生成随机数

我觉得最难的应该是在如何生成用户所需的一组随机数里面（也可能是我脑子不太好）

它是用定时器去生成随机数然后插入数组，下面判断如果大于等于了用户所需的数量，清除掉定时器。然后创建一个把数据等于一个新数组再用for循环遍历出来，新建一个li元素插入到获取的ul元素的dom里面。

这里判断用户输入内容使用的是正则表达式（因为input的value类型是一个字符串，我也不知道有没有别的办法可以去判断字符串是不是一个数字）不过有一说一正则真好用。嘻嘻！