撸一个随机数生成器

一、效果预览

在这里插入图片描述

二、需求

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

三、实现逻辑

根据最大值、最小值（遍历）得到所有可能的数字集合（数组）
对这个数字集合排序打乱（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

相关阅读:
【Linux】Linux环境基础开发工具使用
轻舟程序创建的centos7.x磁盘合并到根的操作方法
MySQL驱动jar包的下载--保姆教程
暑期JAVA学习（40.1）UDP通信——广播、组播
一篇文章教你如何用Telerik组件为桌面应用添加上下文菜单
Docker镜像详解（手拉手教你上传至阿里云，发布到私有库）
什么是 Vue 实例，及其与组件的关系
KingbaseES V8R6集群管理运维案例之---repmgr standby switchover故障
我发论文啦系列之一《融合FY-3C号和FY-4A号卫星数据的积雪面积变化研究—以祁连山区为例》
WPF Treeview控件开虚拟化后定位节点

原文地址：https://blog.csdn.net/weixin_45137565/article/details/125423820