撸一个随机数生成器

后海 0_o

已于 2022-06-24 13:07:58 修改

阅读量1.2k

点赞数 1

分类专栏：前端其他文章标签：前端

于 2022-06-23 13:52:18 首次发布

本文链接：https://blog.csdn.net/weixin_45137565/article/details/125423820

版权

前端其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果预览

在这里插入图片描述

二、需求

随机数范围： 有最大值和最小值
随机数个数： 最后的随机数个数
不可重复： 随机数不可重复

三、实现逻辑

根据最大值、最小值（遍历）得到所有可能的数字集合（数组）
对这个数字集合排序打乱（Array.sort)
设置一个空盒子（数组），将打乱的数字一个个随意顺序放进去（Array.splice）
根据随机数个数，截取前几个数字
输出

四、代码

新建一个 draw.html 文件：

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

<head>
  <meta charset="UTF-8">
  <title>随机数生成</title>
</head>

<body>
  <div>
    <div id="box">
      <h2>随机数生成器</h2>
      <label>随机数范围：</label><input type="text" id="min">--<input type="text" id="max"></br>
      <label>随机数个数：</label><input type="text" id="num"></br>
      <button onclick="drawHandClick()">生成</button>
      <p id="result"></p>
    </div>
  </div>
</body>
<script type="text/javascript">
  function drawHandClick() {
    var min = document.getElementById("min").value; // 获取最小值
    var max = document.getElementById("max").value; // 获取最大值
    var num = document.getElementById("num").value; // 获取个数
    var arr = []
    for (let i = min; i <= max; i++) arr.push(i) // 生成总人数的数组
    var arr = arr.sort(() => 0.5 - Math.random()) // 打乱数组排序 1
    var newArr = []
    for (let j = 0; j < arr.length; j++) { // 打乱数组排序 2
      let index = Math.floor(Math.random() * max)
      newArr.splice(index, 0, arr[j] + '号')
    }
    var newArr = newArr.splice(0, num) // 截取限定名额
    var newArr = newArr.join('、') // 间隔符优化
    document.getElementById("result").innerText = newArr // 输出
  }
</script>
<style type="text/css">
  body {
    font-size: 20px;
  }

  #box {
    border: 3px solid #666;
    width: 500px;
    height: 300px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
  }

  #min,
  #max {
    width: 60px;
    margin: 5px;
  }

  #num {
    margin: 15px;
    width: 115px;
  }

  button {
    width: 80px;
    height: 30px;
    letter-spacing: 10px;
    font-size: 15px;
  }

  h2 {
    margin: 10px 90px;
  }
</style>

</html>