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

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

news 2025/6/21 15:22:46

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

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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/6/20 23:54:56

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/6/17 14:49:12

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/6/15 11:52:38

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/6/20 13:05:29

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/6/16 18:16:22

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/6/19 3:49:44

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/6/17 9:11:08

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/6/16 19:37:25

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/6/19 16:21:45

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/6/21 14:21:20