蓝桥杯练习02随机数生成器

news2025/2/26 22:12:49

随机数生成器

介绍

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

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

其中:
·js/index.js是页面功能实现的逻辑代码。
·index.html是页面布局。
在浏览器中预览index.html页面效果如下:

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

目标

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

  • 封装函数getRandomNum(min,maX,countNum)。

  • 生成min~max范围的countNum个不重复的随机数,最终这些随机数以一个数组的形式返回。
    最终实现效果如下:

最终效果图

规定

请勿修改本题默认项目代码文件夹中的文件名称、文件夹路径等,否则会导致考试系统无法正常评分。

代码

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>

.js

const getRandomNum = function(min, max, countNum) {
    var arr = [];
    // 在此处补全代码
    return arr;
};
module.exports = getRandomNum; //请勿删除

答案

方法一

/**
 * 封装函数,函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数,存入数组并返回
 */
//生成指定数目和范围的随机数

const getRandomNum = function(min, max, countNum) {
    var arr = [];
    // 在此处补全代码
    for (let i = 0; i < countNum; i++) {
        //1、生成随机数
        let number = Math.round(Math.random() * (max - min)) + min
            // 2、如果数组里已经存在该数则重新生成
        while (arr.indexOf(number) !== -1) {
            number = Math.round(Math.random() * (max - min)) + min
        }
        //3、把随机数添加到数组
        arr.push(number)
    } 
    return arr;
};

arr.indexOf() 是 JavaScript 中数组的一个方法,用于查找数组中指定元素的第一个出现的索引位置。如果数组中存在该元素,则返回该元素的索引;若不存在,则返回-1。

方法二

const getRandomNum = function(min, max, countNum) {
    var arr = [];
    // 在此处补全代码
    //首先创建了一个空的 Set 对象
    let set = new Set()
    //Set 的大小达到 countNum 时循环就会结束
    while (set.size < countNum) {
        //生成随机数
        let number = Math.floor(Math.random() * (max - min)) + min;
        //随机数尝试添加到 Set 中
        set.add(number)
    }
    //使用扩展运算符将 Set 转换为数组赋值给 arr
    arr = [...set]
    return arr;
};
module.exports = getRandomNum; //请勿删除

在JavaScript中,Set 是一种特殊的类型,类似于数组,但是其成员的值都是唯一的,没有重复的值。创建一个空的 Set 对象可以使用 new Set() 构造函数。

大家有更简洁的写法可以一起讨论,共同进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1528640.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

01. 【Android教程】系统背景及结构概述

1. Android 的历史 Android 一词的本意指“人形机器人”&#xff0c;安迪•鲁宾 (Andy Rubin) 在 2003 年以此名创办了 Android 公司并开始召集团队研发 Android 系统。后于 2005 年被 Google 收购&#xff0c;安迪•鲁宾随后任 Google 工程部副总裁&#xff0c;继续负责 Andr…

数据可信流通:从运维信任到技术信任

1.数据可信流通概念 "数据可信流通"通常指的是确保数据在不同系统、应用程序或者组织之间的传输和交换过程中的可信性、完整性和安全性。在数据流通的过程中&#xff0c;确保数据的真实性、完整性和保密性是非常重要的&#xff0c;尤其是涉及到敏感信息或者重要数据…

大数据开发--01.初步认识了解

一.环境准备 1.使用虚拟机构建至少三台linux服务器 2.使用公有云来部署服务器 二.大数据相关概念 大数据是指处理和分析大规模数据集的一系列技术、工具和方法。这些数据集通常涉及海量的数据&#xff0c;包括结构化数据&#xff08;如关系型数据库中的表格&#xff09;以及…

Verdaccio部署及基础使用

1. Verdaccio 简介 Verdaccio&#xff0c;是一个轻量级的 npm 私有仓库的开源解决方案。npm是一个基于http的协议&#xff0c;用来存放软件包并且维护版本和依赖&#xff0c;利用 http 提供的 url路径 来对软件包进行增删改查。所以 Verdaccio 这款软件的核心就是实现 npm协议…

机器人路径规划:基于双向A*算法(bidirectional a star)的机器人路径规划(提供Python代码)

一、双向A*算法简介 传统A*算法是一种静态路网中求解最短路径最有效的方法&#xff0c; 它结合了BFS 算法和迪杰斯特拉算法(Dijkstra)的优点。 和迪杰斯特拉算法(Dijkstra)一样&#xff0c; A*算法能够用于 搜索最短路径&#xff1b; 和BFS 算法一样&#xff0c; A*算法可以用…

从头手搓一台ros2复合机器人(带机械臂)

一.前言 大家好呀&#xff0c;从本小节开始我们就步入了仿真篇&#xff0c;主要对机器人仿真进行介绍与操作&#xff0c;当然仿真有优点也有缺陷&#xff0c;基于对此学习&#xff0c;我们可以对上几小节创建的小车模型模拟硬件的特性&#xff0c; 比如&#xff1a; 有多重…

打开磁盘清理工具的9种方法,总有一种适合你

前言 你可以在Windows 10和11上使用许多第三方磁盘清理工具来进行清理。但是,别忘了Windows包含自己的磁盘清理工具,你可以使用该工具释放硬盘存储空间。一些第三方替代方案可能有更广泛的清理选项和功能,但磁盘清理仍然是消除多余文件的完美工具。 每个用户都应该不时地进…

vue 部署 abap BSP

How to Create a Vue.Js App with VS Code and Deploy... - SAP Community 详情见上面这个教程连接 Open VS Code and open a terminal window and run npm install -g vue/cli restart vscode. Open a terminal window again and go to your workspace folder to create the…

使用echart绘制拓扑图,树类型,自定义tooltip和label样式,可收缩

效果如图&#xff1a; 鼠标移上显示 vue3 - ts文件 “echarts”: “^5.4.3”, import { EChartsOption } from echarts import * as echarts from echarts/core import { TooltipComponent } from echarts/components import { TreeChart } from echarts/charts import { C…

VR历史建筑漫游介绍|虚拟现实体验店|VR设备购买

VR历史建筑漫游是一种利用虚拟现实技术&#xff0c;让用户可以身临其境地参观和探索历史建筑的体验。通过VR头显和相关设备&#xff0c;用户可以在虚拟环境中自由移动和互动&#xff0c;感受历史建筑的真实氛围和文化内涵。 在VR历史建筑漫游中&#xff0c;您可以选择不同的历史…

拿捏指针(三)

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 前言 在这之前我们学习了《拿捏指针&#xff08;一&#xff09;》&#xff0c;《拿…

Centos7部署使用TELEMAC-MASCARET

Background TELEMAC-MASCARET是一款研究水动力学和水文学领域的高性能数值仿真开源软件。MASCARET&#xff08;1980&#xff09;和 TELEMAC&#xff08;1987&#xff09;最初是由法电集团所属的法国国立水利与环境实验室开发&#xff0c;随后整合为TELEMAC-MASCARET并由法英德三…

后端系统开发之——创建注册接口

原文地址&#xff1a;后端系统开发之——创建注册接口 - Pleasure的博客 下面是正文内容&#xff1a; 前言 这是一篇SpringBoot项目的实践篇。 主要用于介绍如何从零开始搭建某一种类型的系统。 个人认为&#xff0c;只要后端逻辑完善了&#xff0c;纵使前端页面千变万化都可…

【DL经典回顾】激活函数大汇总(二十四)(Absolute附代码和详细公式)

激活函数大汇总&#xff08;二十四&#xff09;&#xff08;Absolute附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的…

个人开发者上架App流程

摘要 个人开发者完全可以将自己开发的App上传至应用商店进行上架。本文将介绍上架流程的通用步骤&#xff0c;包括确定App功能和定位、准备相关资料、开发App、提交审核、发布App和宣传推广等内容。 引言 个人开发者在如今的移动应用市场中也有机会将自己的作品推向更广泛的…

【书生·浦语大模型实战营】学习笔记3

文章目录 1. 大模型开发范式2. LangChain简介3. 构建向量数据库4. 搭建知识库助手5. Web Demo部署6. 动手实战环节环境配置知识库搭建InternLM接入LangChain构建检索问答链部署Web Demo 参考资料 1. 大模型开发范式 LLM局限性&#xff1a; 知识时效性&#xff1a;LLM无法获取最…

【Vue3】组件通信的的各种方式和tsx风格

组件通信 Vue2组件通信方式全局事件总线bus&#xff0c;可以实现组件通信 Vue3组件通信方式propsprovide与inject依赖注入 全局APiVue3其他改变组件通信之自定义事件组件通信之事件总线组件通信之v-model多个v-model传值 TSX风格使用风格一使用tsx风格&#xff0c;使用optionsA…

V-JEPA模型,非LLM另外的选择,AGI的未来:迈向Yann LeCun先进机器智能(AMI)愿景的下一步

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Flink源码解析(1)job启动,从JM到TM过程详解

网络传输模型 首先在看之前,回顾一下akka模型: Flink通讯模型—Akka与Actor模型-CSDN博客 注:ActorRef就是actor的引用,封装好了actor 下面是jm和tm在通讯上的概念图: RpcGateway 不理解网关的作用,可以先移步看这里:网关_百度百科 (baidu.com) 用于定义RPC协议,是…

JS11-scroll相关属性和缓动动画

scroll 相关属性 window.onscroll() 方法 当我们用鼠标滚轮&#xff0c;滚动网页的时候&#xff0c;会触发 window.onscroll() 方法。效果如下&#xff1a;&#xff08;注意看控制台的打印结果&#xff09; 如果你需要做滚动监听&#xff0c;可以使用这个方法。 我们来看看和…