【Html.js——算法实现】随机数生成器（蓝桥杯真题-1842）【合集】

Rossy Yan

发布于 2025-01-24 11:21:56

5190

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

实际工作中随机数的使用特别多，比如随机抽奖、随机翻牌。通过随机数还能实现很多有趣的效果，比如随机改变元素的位置或颜色。本题需要在已提供的基础项目中使用 JS 知识封装一个函数，该函数可以根据需要，生成指定范围和个数的不重复的随机数数组。

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/exam12-imi.zip && unzip exam12-imi.zip && rm exam12-imi.zip

下载完成之后的目录结构如下：

├── index.html # 页面布局
└── js
    ├── index.js # 页面功能实现的逻辑代码

源码下载后，选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

当前并未生成并显示指定条件的随机数。

目标要求

请在 index.js 文件中补全函数 getRandomNum 中的代码，最终将根据指定条件生成的随机数显示在页面中。具体需求如下：

封装函数 getRandomNum(min,max,countNum)。
生成 min ~ max 范围的 countNum 个不重复的随机数，最终这些随机数以一个数组的形式返回。

最终实现效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

//index.js
/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min,max,countNum){
    var arr = [];
    // 在此处补全代码
    while(arr.length < countNum){
        let num = Math.floor(Math.random()*(max-min+1))+min;
        if(!arr.includes(num)){
        arr.push(num);
        }
    }
    return arr;
}
module.exports = getRandomNum; //请勿删除

代码解析📑

1. HTML 部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/index.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var testArr = getRandomNum(1,30,3);
			document.write("<h1>1-30 以内的 3 个随机数："+testArr+"</h1>");
			testArr = getRandomNum(1,100,10);
			document.write("<h1>1-100 以内的 10 个随机数："+testArr+"</h1>");
		</script>
	</body>
</html>

解释：

<!DOCTYPE html>：这是 HTML5 的文档类型声明，用于告诉浏览器使用 HTML5 标准来解析页面。
<html>：HTML 文档的根元素，包含整个页面的内容。
<head>：包含页面的元数据，如字符编码、页面标题和外部资源引用等。
- <meta charset="utf-8">：指定页面使用 UTF-8 字符编码，确保正确显示各种字符，包括中文、特殊符号等。
- <title></title>：页面的标题元素，这里是空的，可以根据需要设置页面的标题。
- <script src="./js/index.js"></script>：引入外部的 JavaScript 文件，文件路径为 ./js/index.js，该文件包含了 getRandomNum 函数的实现。
<body>：包含页面的主体内容。
- <script type="text/javascript">：在页面中嵌入的 JavaScript 代码块。
  - var testArr = getRandomNum(1, 30, 3);：调用 getRandomNum 函数，传入参数 1（最小值）、30（最大值）和 3（要生成的随机数的数量），将结果存储在 testArr 变量中。
  - document.write("<h1>1-30 以内的 3 个随机数：" + testArr + "</h1>");：使用 document.write 方法将生成的随机数信息以 <h1> 标题的形式输出到页面上。testArr 存储的是调用 getRandomNum 函数生成的随机数数组，将其添加到输出字符串中。
  - testArr = getRandomNum(1, 100, 10);：再次调用 getRandomNum 函数，这次生成 1 到 100 之间的 10 个随机数，并将结果存储在 testArr 变量中。
  - document.write("<h1>1-100 以内的 10 个随机数：" + testArr + "</h1>");：将生成的 1 到 100 之间的 10 个随机数以 <h1> 标题的形式输出到页面上。

2. JavaScript 部分

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min,max,countNum){
    var arr = [];
    // 在此处补全代码
    while(arr.length < countNum){
        let num = Math.floor(Math.random()*(max-min+1))+min;
        if(!arr.includes(num)){
        arr.push(num);
        }
    }
    return arr;
}
module.exports = getRandomNum; //请勿删除

解释：

const getRandomNum = function(min, max, countNum) {...}：定义一个名为 getRandomNum 的函数，接收三个参数：
- min：随机数范围的下限。
- max：随机数范围的上限。
- countNum：要生成的不重复随机数的数量。
var arr = [];：创建一个空数组 arr，用于存储生成的随机数。
while (arr.length < countNum) {...}：使用 while 循环来生成随机数，只要数组 arr 的长度小于 countNum，就会继续生成新的随机数。
let num = Math.floor(Math.random() * (max - min + 1)) + min;：
- Math.random()：生成一个介于 0（包括）和 1（不包括）之间的随机浮点数。
- (max - min + 1)：计算出范围的长度。
- Math.floor()：将浮点数向下取整，得到一个整数。
- + min：将下限 min 加上去，得到最终的随机数，确保随机数在 min 到 max 的范围内。
if (!arr.includes(num)) {...}：使用 includes 方法检查生成的随机数 num 是否已经存在于数组 arr 中，如果不存在，将其添加到数组中，以确保生成的随机数不重复。
return arr;：将存储生成的不重复随机数的数组作为结果返回。
module.exports = getRandomNum;：在 Node.js 环境中，将 getRandomNum 函数导出，以便其他模块可以使用该函数。

3. 工作流程 ▶️

HTML 部分加载和执行顺序：
- 当浏览器加载这个 HTML 页面时，首先会解析 <!DOCTYPE html>，并识别出这是一个 HTML5 页面。
- 接着处理 <head> 部分，设置字符编码，加载外部的 JavaScript 文件 ./js/index.js。
- 当浏览器解析到 <body> 中的 <script> 部分时，开始执行其中的 JavaScript 代码。
JavaScript 函数调用和执行顺序：
- 调用 getRandomNum(1, 30, 3) 函数，开始生成 1 到 30 之间的 3 个不重复随机数。
  - 创建一个空数组 arr。
  - 进入 while 循环，不断生成随机数，直到数组长度达到 3 个。
  - 在每次循环中，使用 Math.random() 生成一个 0 到 1 的随机浮点数，通过 (max - min + 1) 调整范围，Math.floor() 取整并加上 min 得到最终的随机数。
  - 检查生成的随机数是否已在数组中，不在的话添加到数组。
- 调用 document.write() 输出结果。
- 再次调用 getRandomNum(1, 100, 10) 函数，生成 1 到 100 之间的 10 个不重复随机数，重复上述步骤。

😎小总结： 这段代码结合了 HTML 和 JavaScript 实现了一个简单的随机数生成器。HTML 部分负责页面的结构和调用 JavaScript 函数，JavaScript 部分的 getRandomNum 函数实现了生成指定范围和数量的不重复随机数的功能。通过循环和条件判断确保随机数的不重复性，最终将结果输出到页面上。