当前位置： 首页 > news >正文

JavaScript基础五对象 内置对象 Math.random()

news 文章来源：https://blog.csdn.net/yavlgloss/article/details/135979756 2025/5/6 3:44:50

内置对象-生成任意范围随机数

Math.random() 随机数函数， 返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）

  • 如何生成0-10的随机数呢？
    Math.floor(Math.random() * (10 + 1)) 放大11倍再向下取整

  • 如何生成5-10的随机数？
    Math.floor(Math.random() * (5 + 1)) + 5

  • 如何生成N-M之间的随机数?
    Math.floor(Math.random() * (M - N + 1)) + N

function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N
}console.log(getRandom(4,8))

案例1 随机点名案例

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中

分析：
①：利用随机函数随机生成一个数字作为索引号
②： 数组[随机数] 生成到页面中

let names = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] 
let random = Math.floor(Math.random()*7)
console.log(names[random])

案例2 随机点名案例改进

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不允许重复显示

let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
let random = Math.floor(Math.random() * arr.length)
// 2. 页面输出数组里面的元素 
document.write(arr[random])// 3. splice(起始位置(下标), 删除几个元素)
arr.splice(random, 1)
console.log(arr)

案例3 猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束

  // 1. 随机生成一个数字 1~10// 取到 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}let random = getRandom(1, 10)console.log(random)// 需要不断的循环while (true) {// 2. 用户输入一个值let num = +prompt('请输入你猜的数字:')// 3. 判断输出if (num > random) {alert('您猜大了')} else if (num < random) {alert('您猜小了')} else {alert('猜对啦，真厉害')break  // 退出循环}}

案例4 生成随机颜色(没做出来)

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
①：如果参数传递的是true或者无参数，则输出 一个随机十六进制的颜色
②：如果参数传递的是false，则输出 一个随机rgb的颜色
③：格式：

function getRandomColor(flag){
}
console.log(getRandomColor(true)) //#ffffff
console.log(getRandomColor(false)) //rgb(255,255,255)

分析：
提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符,需要用到数组， let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
提示： rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字

<script>// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']// 利用for循环随机抽6次 累加到 str里面for (let i = 1; i <= 6; i++) {// 每次要随机从数组里面抽取一个  // random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)// str = str + arr[random]str += arr[random]}return str} else {// 4. 否则是 false 则返回 rgb(255,255,255)let r = Math.floor(Math.random() * 256)  // 55let g = Math.floor(Math.random() * 256)  // 89let b = Math.floor(Math.random() * 256)  // 255return `rgb(${r},${g},${b})`}}// 2. 调用函数 getRandomColor(布尔值)console.log(getRandomColor(false))console.log(getRandomColor(true))console.log(getRandomColor())</script>

案例5 综合渲染案例(没看)

在这里插入图片描述

<body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <li><a href="#"><img src="images/course01.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • <span>1125</span>人在学习</div></a></li> --><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'AndroidAPP实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},{src: 'images/course04.png',title: '自动添加的模块',num: 1000}]for (let i = 0; i < data.length; i++) {document.write(`<li><a href="#"><img src=${data[i].src} title="${data[i].title}"><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li>`)}</script></ul></div></div></body>

相关文章：

JavaScript基础五对象 内置对象 Math.random()

内置对象-生成任意范围随机数 Math.random() 随机数函数&#xff0c; 返回一个0 - 1之间&#xff0c;并且包括0不包括1的随机小数 [0, 1&#xff09; 如何生成0-10的随机数呢&#xff1f; Math.floor(Math.random() * (10 1)) 放大11倍再向下取整 如何生成5-10的随机数&…...

编程日记 2024/2/3 0:08:00

curl之网络接口

Curl_cftype 连接接口定义 struct Curl_cftype {const char *name; /* name of the filter type */int flags; /* flags of filter type */int log_level; /* log level for such filters */Cu…...

编程日记 2024/2/3 0:05:59

Pytest中doctests的测试方法应用

在 Python 的测试生态中，Pytest 提供了多种灵活且强大的测试工具。其中，doctests 是一种独特而直观的测试方法，通过直接从文档注释中提取和执行测试用例，确保代码示例的正确性。本文将深入介绍 Pytest 中 doctests 的测试方法，包括基本用法和实际案例，以帮助你更好地利用…...

编程日记 2024/2/3 0:03:57

Android 8.1 铃声音量通话音量同步调节

Android 8.1 铃声音量通话音量同步调节 最近收到客户反馈&#xff0c;想要实现铃声音量通话音量同步调节&#xff0c;具体修改参照如下&#xff1a; /frameworks/base/core/java/android/preference/SeekBarVolumizer.java if (defaultUri null) {if (mStreamType AudioMan…...

编程日记 2024/2/3 0:02:56

C++——字符串string

C——字符串string C语言中对字符串的表示通常用指针&#xff0c;新手会面临内存泄漏或者段错误等众多问题。 在 C 中&#xff0c; string 类是标准库的一部分&#xff0c;用于表示和操作字符串。它是对传统的 C 风格字符串&#xff08;以空 字符 ‘\0’ 结尾的字符数组&…...

编程日记 2024/2/3 0:00:53

HBuilder使用[微信小程序开发者工具] 显示 × initialize报错

解决办法 我们先要单独打开 微信开发者工具 点击设置里面的安全,把服务器端口打开 然后再回到我们的HBuilder使用重新打开打开 成功打开...

编程日记 2024/2/2 23:58:51

洛谷P8599 [蓝桥杯 2013 省 B] 带分数

[蓝桥杯 2013 省 B] 带分数 题目描述 100 100 100 可以表示为带分数的形式&#xff1a; 100 3 69258 714 100 3 \frac{69258}{714} 100371469258​。 还可以表示为&#xff1a; 100 82 3546 197 100 82 \frac{3546}{197} 100821973546​。 注意特征&#xff1a;带分…...

编程日记 2024/2/2 23:57:50

grafana安装DevOpsProdigy KubeGraf 1.5.2

安装DevOpsProdigy KubeGraf需要安装kube-state-metrics 官方地址&#xff1a;https://github.com/kubernetes/kube-state-metrics/tree/release-2.10/examples/standard 查看k8s版本和kube-state-metrics对应版本&#xff1a; [rootmaster1 kube-state-metrics]# ll 总用量 …...

编程日记 2024/2/2 23:56:49

大数据 - Hadoop系列《三》- MapReduce（分布式计算引擎）概述

上一篇文章&#xff1a; 大数据 - Hadoop系列《三》- HDFS&#xff08;分布式文件系统&#xff09;概述-CSDN博客 目录 12.1 针对MapReduce的设计构思 1. 如何对付大数据处理场景 2. 构建抽象编程模型 3. 统一架构、隐藏底层细节 12.2 分布式计算概念 12.3 MapReduce定义…...

编程日记 2024/2/2 23:55:47

了解Ansible自动化运维工具及模块的使用

一、Ansible的相关知识 1.1 Ansible工具的了解 Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可以实现。Ansible…...

编程日记 2024/2/2 23:53:44

sql指南之null值用法

注明&#xff1a;参考文章&#xff1a; SQL避坑指南之NULL值知多少&#xff1f;_select null as-CSDN博客文章浏览阅读2.9k次&#xff0c;点赞7次&#xff0c;收藏21次。0 引言 SQL NULL&#xff08;UNKNOW&#xff09;是用来代表缺失值的术语&#xff0c;在表中的NULL值是显示…...

编程日记 2024/2/2 23:52:43

常见消息队列：ActiveMQ、RabbitMQ、RocketMQ、Kafka的区别总结

目录 前言 1、常见消息队列 1.ActiveMQ 2.RabbitMQ 3.RocketMQ 4.Kafka 2、区别 1.消息传递模型 2.消息持久化 3.消息顺序性 4.可靠性 5.生态系统和社区支持 6.表格对比 前言 消息队列可以实现应用程序之间的异步通信&#xff0c;能够实现异步消息的发送和接收&am…...

编程日记 2024/2/2 23:46:38

火柴人大逃亡

欢迎来到程序小院 火柴人大逃亡 玩法&#xff1a;左右两边火柴人&#xff0c;点击左边左边火柴人跳跃&#xff0c;点击右边右边跳跃&#xff0c; 上下快速移动道路&#xff0c;躲过障碍物&#xff0c;看你能坚持多久&#xff0c;快去火柴人大逃亡吧^^。开始游戏https://www.or…...

编程日记 2024/2/2 23:41:32

AI革命新篇章：法国天才团队挑战ChatGPT霸主地位

Mistral AI: Guillaume Lample, Arthur Mensch et Timothe Lacroix. ChatGPT 的霸主地位已被三位来自法国的天才所颠覆&#xff01;如上图这三个人&#xff0c;其中一位曾在 DeepMind 工作&#xff0c;另外两位来自 Meta&#xff0c;他们联手为 AI 领域带来了革命性的变革 我…...

编程日记 2024/2/2 23:40:31

数据双向绑定v-modal

v-model v-model就实现了双向数据绑定&#xff0c;实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件&#xff0c;在父组件使用v-on来监听对应的事件并修改相应的数据。 input的v-model就是通过<input :value"value" input"input"…...

编程日记 2024/2/2 23:39:30

Docker 容器jar 运行报错 at sun.awt.FontConfiguration.getVersion 解决方法

docker jar 运行报错 at sun.awt.FontConfiguration.getVersion 初步判断是在运行 Docker 容器中的 JAR 文件时遇到了与字体配置相关的问题。这个问题可能是由于容器内缺少字体配置或字体文件而引起的。 要解决这个问题&#xff0c;你可以尝试以下方法&#xff1a; 1.安装字…...

编程日记 2024/2/2 23:38:29

光学3D表面轮廓仪服务超精密抛光技术发展

随着技术的不断进步&#xff0c;精密制造领域对材料表面的处理要求越来越高&#xff0c;超精密抛光技术作为当下表面处理的尖端技术&#xff0c;对各种高精密产品的生产起到了至关重要的作用&#xff0c;已广泛应用于集成电路制造、医疗器械、航空航天、3C电子、汽车、精密模具…...

编程日记 2024/2/2 23:37:28

详解C++中auto关键字

auto关键字 auto关键字(C11)类型别名思考auto简介auto的使用细则auto与指针和引用结合起来使用在同一行定义多个变量 auto不能推导的场景1.auto不能作为函数的参数2.auto不能直接用来声明数组 auto关键字(C11) 类型别名思考 随着程序越来越复杂&#xff0c;程序中用到的类型也…...

编程日记 2024/2/2 23:31:23

24.云原生ArgoCD高级之数据加密seale sealed

云原生专栏大纲 文章目录 数据加密之seale sealedBitnami Sealed Secrets介绍Bitnami Sealed Secrets工作流程安装sealed-secrets和kubeseal安装sealed-secrets-controller安装kubeseal通过kubeseal将sealed-secrets公钥拿出来通过kubeseal加密secrets替换kustomize下secret为…...

编程日记 2024/2/2 23:30:21

线性代数：线性方程组

目录 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理...

编程日记 2024/2/2 23:29:20

标准的排序组合-算法

题目 有若干个字母&#xff0c;要求计算出长度为4的所有可能得组合 解题 排序组合最适用的就是回溯了&#xff0c;建议大家本地debug一层一层的看能好理解点 private static void getResult(List<String> source, Stack<String> temp, int curLength, int maxL…...

编程日记 2024/2/2 23:26:18

2402C++,C++递归取各种节点名字

参考 explicit FindNamedClassVisitor(ASTContext *Context) : Context(Context) {}元<类 T>极 动作(T&e){串 ae->getQualifiedNameAsString();d.加(a);中 真;} bool VisitCXXRecordDecl(CXXRecordDecl *e) {中 动作(e);} bool VisitFunctionDecl(FunctionDecl*e…...

编程日记 2024/2/2 23:24:16

Qt 5.9.4 转 Qt 6.6.1 遇到的问题总结（三）

1.QSet: toList 中的toList 函数已不存在&#xff0c;遇到xx->toList改成直接用&#xff0c;如下&#xff1a; 2.开源QWT 图形库中QwtDial中的 setPenWidth 变成 setPenWidthF函数。 3.QDateTime 中无setTime_t 改为了setSecsSinceEpoch函数。 4.QRegExp 类已不存在 可以用Q…...

编程日记 2024/2/2 23:19:12

Logstash 7.7.1版本安装系统梳理

前言 上一篇文章介绍了 《ElasticSearch7.7.1集群搭建 & Kibana安装》&#xff0c;今天说一下 Logstash的安卓和配置&#xff1b; Logstash是一个开源的数据收集引擎&#xff0c;具有实时管道功能。它可以动态地将来自不同数据源的数据统一起来&#xff0c;并将数据标准化…...

编程日记 2024/2/2 23:18:11

4. sass实用函数归纳

4. sass实用函数归纳 字符串函数 1、quote(string) 给字符串添加引号 quote(xiaoming) // "xiaoming"2、unquote(string) 移除字符串的引号 unquote("xiaoming") // xiaoming3、str-index(string, substring) 返回 substring 子字符串第一次在 stri…...

编程日记 2024/2/2 23:17:10

《元梦之星》赛季更新带来“新”内容，为何却被玩家集体声讨？

前段时间&#xff0c;《元梦之星》迎来了“山海奇遇”赛季的重磅更新&#xff0c;诸多“新”内容的上线吸引了很多玩家们的关注&#xff0c;然而在新版本开启之后没有多&#xff0c;新玩法新时装甚至是游戏中的新改动都引起了不少玩家的不满。 在新赛季开启之后&#xff0c;玩家…...

编程日记 2024/2/2 23:12:05

故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab）

效果一览 文章概述 故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab） 模型描述 卷积神经网络（Convolutional Neural Network，CNN）和支持向量机（Support Vector Machine，SVM）是两种常用的机器学习算法，它们在不同领域和任务中都表现出…...

编程日记 2024/2/2 23:11:04

菜鸡后端的前端学习记录-2

前言 记录一下看视频学习前端的的一些笔记&#xff0c;以前对Html、Js、CSS有一定的基础&#xff08;都认得&#xff0c;没用过&#xff09;&#xff0c;现在不想从头再来了&#xff0c;学学Vue框架&#xff0c;不定时更新&#xff0c;指不定什么时候就鸽了。。。。 忘了记一下…...

编程日记 2024/2/2 23:10:03

Layui + Echarts 5.0

Layui 怎么整合最新版本的 Echarts 5.0&#xff0c;Echarts 4 升级到 5后&#xff0c;有了很大改变&#xff0c;新的配置项4是无法兼容的&#xff0c;所以想要使用新的功能&#xff0c;都需要升级&#xff01; 新建一个echarts.js文件 layui.define(function (exports) {// 这…...

编程日记 2024/2/2 23:08:01

linux使用iptables禁用ip

iptables是什么&#xff1f; iptables 是一个强大的开源软件&#xff0c;它是 Linux 系统内核中 netfilter 包过滤框架的一部分&#xff0c;用来实现防火墙功能。iptables 提供了一种灵活的方式来控制和管理进出以及通过 Linux 计算机的网络流量。 前提 我在云服务器上用doc…...

编程日记 2024/2/2 23:07:00