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

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

news 2026/5/10 22:19:35

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

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

3步掌握Hitboxer：解决游戏按键冲突的终极指南

3步掌握Hitboxer&#xff1a;解决游戏按键冲突的终极指南 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 你是否曾在激烈的游戏对战中&#xff0c;因为同时按下W和S键导致角色原地不动而错失良机&#xff1f;或…...

编程新知 2026/5/10 20:39:24

2026 Agent 记忆系统横评——10 种方案、LoCoMo benchmark、谁才是真王者？

2026 年 5 月&#xff0c;mem0.ai 发布了一份《State of AI Agent Memory 2026》报告&#xff0c;用 LoCoMo 这个公认最难的长对话 benchmark&#xff0c;把市面上 10 种 Agent 记忆方案做了一次系统横评。读完之后我做了一件事——把"AI Agent 应该用哪种记忆"这个问…...

编程新知 2026/5/10 20:26:06

OBS多路推流插件：专业级多平台直播同步解决方案

OBS多路推流插件&#xff1a;专业级多平台直播同步解决方案 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp OBS多路推流插件obs-multi-rtmp是一款高效的开源工具&#xff0c;专为直播创…...

编程新知 2026/5/10 20:21:53

JSBSim飞行动力学引擎技术解析与多领域应用指南

JSBSim飞行动力学引擎技术解析与多领域应用指南 【免费下载链接】jsbsim An open source flight dynamics & control software library 项目地址: https://gitcode.com/gh_mirrors/js/jsbsim JSBSim是一款开源的六自由度飞行动力学模型库&#xff0c;为航空航天领域…...

编程新知 2026/5/10 20:01:10

独立开发者如何借助Taotoken低成本实验多种大模型能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何借助Taotoken低成本实验多种大模型能力 对于独立开发者而言&#xff0c;在产品原型阶段进行技术选型与功能验证&…...

编程新知 2026/5/10 19:28:32

如何快速解锁QQ音乐加密文件：qmcflac2mp3完整使用指南

如何快速解锁QQ音乐加密文件&#xff1a;qmcflac2mp3完整使用指南 【免费下载链接】qmcflac2mp3 直接将qmcflac文件转换成mp3文件&#xff0c;突破QQ音乐的格式限制 项目地址: https://gitcode.com/gh_mirrors/qm/qmcflac2mp3 你是否遇到过这样的困扰&#xff1f;在QQ音…...

编程新知 2026/5/10 18:57:16

在Taotoken控制台清晰查看各模型用量与消费明细的实践

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Taotoken控制台清晰查看各模型用量与消费明细的实践 对于使用多个大模型API的项目而言&#xff0c;清晰、及时地了解资源消耗情况…...

编程新知 2026/5/10 18:49:11

Windows与Office一键激活终极指南：KMS_VL_ALL_AIO智能脚本完整教程

Windows与Office一键激活终极指南&#xff1a;KMS_VL_ALL_AIO智能脚本完整教程 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统激活和Office办公软件激活而烦恼吗&#xff1f;…...

编程新知 2026/5/10 18:22:29

如何永久保存微信聊天记录？3步实现数据自主掌控的完整方案

如何永久保存微信聊天记录&#xff1f;3步实现数据自主掌控的完整方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/5/10 16:58:10

终极语音修复指南：用AI技术解决录音质量问题的完整方案 [特殊字符]

终极语音修复指南&#xff1a;用AI技术解决录音质量问题的完整方案 &#x1f3a4; 【免费下载链接】voicefixer General Speech Restoration 项目地址: https://gitcode.com/gh_mirrors/vo/voicefixer 你是否曾因录音质量不佳而烦恼&#xff1f;会议录音充满杂音&#x…...

编程新知 2026/5/10 14:29:21