JavaScript练手小技巧:JS 随机数小技巧

2024-06-19 01:52

本文主要是介绍JavaScript练手小技巧:JS 随机数小技巧,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS 里利用 Math.random() 可以产生0-1 之间的随机小数。如:

 let  num1 = Math.random(); // 0-1之间的随机数console.log(num1);// 0.05563019650398182

可以用随机数做一些有趣的事情。

一、指定范围的随机整数

 // 随机整数function randomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}​// 调用函数let randomNum = randomInt(1, 100);   // 得到 1-100 之间的随机整数console.log(randomNum);

二、随机颜色

方式一:凑够 6 位十六进制的字符串

 function randomColor() {var letters = "0123456789ABCDEF";var color = "#";for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 应用示例:修改 box 的字体颜色为随机色box.style.color = randomColor();

方式二:利用 CSS rgb() 方法,凑3个随机 0-255 的整数。

 function randomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}​function randomColor() {return `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;}// 应用示例:修改 box 的字体颜色为随机色box.style.color = randomColor();

方式三:利用 toString() 把随机小数转为16进制,再截取6位长度字符串。不够长度就凑0。

 function randomColor() {return '#' + Math.random().toString(16).substr(2, 6).padEnd(6, '0');}// 应用示例:修改 box 的字体颜色为随机色box.style.color = randomColor();

三、指定长度随机字符串

方式一:随机获取制定个数的字符。

 function randomString(len){let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let str = "";for(let i=0;i<len;i++){str += chars[Math.floor(Math.random()*chars.length)];    }return str;}console.log(randomString(10));   // yBzTEgmI8P

方式二:利用 toString() 把随机小数转为16进制,再截取制定长度字符串。不够长度就凑0。

不过,这种方式最多截取11位,因为 Math.random() 小数长度就是 11 位。所以,超过11位,就需要递归调用。

 function randomString(len){return len <= 11 ?Math.random().toString(36).substr(2, len).padEnd(len, '0') :Math.random().toString(36).substr(2, 11) + randomString(len - 11);}console.log(randomString(15));

四、数组乱序

Math.random() 产生一个 0~ 1 之间的随机小数。根据这个小数是否大于 0.5,来决定数据的前后顺序。这个是随机的,所以结果就是随机的。

 let  arr = [ 123,12,32,5,75,23];let  sortFun = function(a,b){return  Math.random()>0.5 ? 1 : -1;};arr.sort( sortFun );console.info( arr ); 

这篇关于JavaScript练手小技巧:JS 随机数小技巧的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073682

相关文章

springboot集成easypoi导出word换行处理过程

《springboot集成easypoi导出word换行处理过程》SpringBoot集成Easypoi导出Word时,换行符n失效显示为空格,解决方法包括生成段落或替换模板中n为回车,同时需确... 目录项目场景问题描述解决方案第一种:生成段落的方式第二种:替换模板的情况,换行符替换成回车总结项目场景s

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么?基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security?—— 核心思想二、如何在 Java 项目中使用?——

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。

java.sql.SQLTransientConnectionException连接超时异常原因及解决方案

《java.sql.SQLTransientConnectionException连接超时异常原因及解决方案》:本文主要介绍java.sql.SQLTransientConnectionExcep... 目录一、引言二、异常信息分析三、可能的原因3.1 连接池配置不合理3.2 数据库负载过高3.3 连接泄漏