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

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

news 2026/3/26 20:26:00

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

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

F_Record：让Photoshop绘画过程录制变得简单高效的轻量级插件

F_Record&#xff1a;让Photoshop绘画过程录制变得简单高效的轻量级插件 【免费下载链接】F_Record 一款用来录制绘画过程的轻量级PS插件 项目地址: https://gitcode.com/gh_mirrors/fr/F_Record 在数字艺术创作领域&#xff0c;每一笔笔触都承载着创作者的灵感与思考。…...

编程新知 2026/3/26 20:23:44

ChezScheme测试性能优化：从53分钟到8分钟的效率跃迁

ChezScheme测试性能优化&#xff1a;从53分钟到8分钟的效率跃迁 【免费下载链接】ChezScheme Chez Scheme 项目地址: https://gitcode.com/gh_mirrors/ch/ChezScheme 一、痛点分析&#xff1a;串行测试的性能瓶颈 识别测试效率问题 在软件开发迭代过程中&#xff0c;…...

编程新知 2026/3/26 20:09:41

苹果内购Java后端避坑指南：沙盒测试、凭据验证与订单防重的那些事儿

苹果内购Java后端避坑指南&#xff1a;沙盒测试、凭据验证与订单防重的那些事儿 第一次对接苹果应用内购&#xff08;IAP&#xff09;时&#xff0c;我以为按照官方文档走完流程就万事大吉了。直到凌晨三点收到服务器告警——重复充值、验证超时、沙盒环境漏测等问题接踵而至。…...

编程新知 2026/3/26 19:10:49

无限级数求和的Java实现与数学分析

本文旨在详细说明如何使用Java精确计算特定形式的无限级数 S -(2x)^2/2&#xff01; (2x)^4/4&#xff01; - (2x)^6/6&#xff01; ... 在指定区间 [0.1, 1.5] 内部和。我们将深入分析等级数的数学性质&#xff0c;推导其闭合形式&#xff0c;并在此基础上纠正原始Java代码…...

编程新知 2026/3/26 17:31:38

用快马平台十分钟搭建小龙虾电商网站原型：从菜单到购物车

最近想尝试做一个小龙虾电商网站的原型&#xff0c;从菜单展示到购物车功能一气呵成。传统开发流程可能需要前后端配合、搭建环境、调试接口&#xff0c;但这次我用InsCode(快马)平台尝试了快速原型开发&#xff0c;整个过程比想象中简单很多。 1. 确定核心功能框架 首先梳理…...

编程新知 2026/3/26 16:53:18

安卓逆向实战：用Frida绕过App反调试的5种常见检测（附完整脚本）

安卓逆向工程实战&#xff1a;Frida对抗反调试的深度解决方案 在移动安全研究领域&#xff0c;逆向工程师经常面临各种反调试技术的挑战。当传统的调试工具遭遇精心设计的防护机制时&#xff0c;往往束手无策。本文将深入探讨五种主流反调试检测手段的对抗策略&#xff0c;提供…...

编程新知 2026/3/26 16:45:15

别再纠结了！Android音视频开发选软解(FFmpeg)还是硬解(MediaCodec)？一个实战Demo帮你做决定

Android音视频开发实战&#xff1a;软解与硬解的性能对决 在移动端音视频开发领域&#xff0c;选择软解还是硬解一直是个令人头疼的问题。每次技术选型会议上&#xff0c;总能看到两派开发者争得面红耳赤——软解支持者强调其灵活性和兼容性&#xff0c;硬解拥趸则推崇其性能和…...

编程新知 2026/3/26 16:16:54

3步搞定Windows 11优化：用Win11Debloat让你的电脑更快更干净

3步搞定Windows 11优化&#xff1a;用Win11Debloat让你的电脑更快更干净 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简…...

编程新知 2026/3/26 16:00:52

BilibiliDown：突破B站视频下载限制的革新性工具

BilibiliDown&#xff1a;突破B站视频下载限制的革新性工具 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bili…...

编程新知 2026/3/26 16:00:52

嵌入式行业职业发展路径

嵌入式行业职业规划&#xff1a;技术→管理→经营→投资 这个路径代表了嵌入式从业者从执行者到决策者、从专业人才到复合型领袖的典型进阶之路。以下分阶段详解每个层级的核心任务、能力要求及转型关键。第一阶段&#xff1a;技术深耕&#xff08;0-5年&#xff09; 核心定位&…...

编程新知 2026/3/26 15:11:58