javaScript随机数random的妙用
目录
- 一、介绍
- 二、生成[min,max]之间的数
- 三、生成随机布尔值
- 四、随机排序数组
- 五、随机生成颜色
-
- 1.十六进制颜色
- 2.RGB格式
- 六、随机验证码
- 七、随即动画
一、介绍
简介：Math.random() 是生成随机数的基础。通过与其他数学函数和运算符结合使用，可以生成各种类型的随机数，如整数、小数、特定范围内的数等。
生成区间：[0,1)
二、生成[min,max]之间的数
表达式：
Math.floor(Math.random() * (max - min + 1)) + min
- Math.random() 返回一个介于 0 到 1 之间的随机小数（不包括 1）。
- (max - min + 1) 计算随机数的范围，即最大值减去最小值，并加上 1。这是为了确保随机数范围包括 min 和 max。
- 将随机小数乘以随机数范围 (max - min + 1)，得到一个介于 0 到 (max - min + 1) 之间的随机小数。
- 使用 Math.floor() 将随机小数向下取整，舍去小数部分，得到一个介于 0 到 (max - min) 之间的整数。
- 最后，将结果加上 min，将整数平移至 min 到 max 之间，得到一个介于 min 和 max 之间的随机整数。
三、生成随机布尔值
生成随机布尔值可以使用 Math.random() 结合比较操作符。
以下是一个示例代码，它生成一个随机的布尔值（true 或 false）：
var randomBoolean = Math.random() < 0.5;
console.log(randomBoolean);
在这个示例中，Math.random() 生成一个介于 0 和 1 之间的随机数。通过将其与 0.5 进行比较，我们可以得到一个布尔值。如果随机数小于 0.5，那么 randomBoolean 将为 true，否则为 false。
这样，每次运行代码时，randomBoolean 将以大约 50% 的概率为 true，另外 50% 的概率为 false。请注意，由于随机性的存在，每次运行代码时结果可能不同。
四、随机排序数组
JavaScript生成随机排序数组的示例：
// 随机排序函数
function randomSort(a, b) {
return Math.random() - 0.5;
}
// 原始数组
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 对数组进行随机排序
array.sort(randomSort);
console.log(array);
这段代码使用JavaScript语言生成随机排序数组的示例。让我们逐行解释：
-
randomSort函数是用来进行随机排序的自定义排序函数。它接受两个参数a和b，并返回一个介于 -0.5 和 0.5 之间的随机数。 -
array是一个包含了要排序的元素的原始数组。 -
通过调用数组的
sort方法，并传入randomSort函数作为参数，对数组进行随机排序。 -
最后，使用
console.log输出随机排序后的数组。
五、随机生成颜色
1.十六进制颜色
Math.random().toString(16).slice(2, 8).padEnd(6, '0')
Math.random()：生成一个介于 0 和 1 之间的随机浮点数。toString(16)：将随机数转换为十六进制字符串表示形式。slice(2, 8)：从生成的十六进制字符串中截取第 2 到第 7 个字符，以避免包含前导的0.。padEnd(6, '0')：如果截取的字符串长度小于 6，使用'0'进行填充，使其达到 6 个字符的长度。
通过这个表达式，我们可以生成一个随机的六位十六进制颜色代码，例如 '#A1B2C3'。由于使用了 Math.random()，每次运行代码时都会得到一个不同的随机颜色。
这种方法更加简洁，避免了使用循环和字符集数组。然而，需要注意的是，由于 Math.random() 的随机性特性，生成的颜色可能不会均匀分布在所有可能的颜色中，可能会出现较接近白色或较接近黑色的颜色。
2.RGB格式
如果你想直接生成 RGB 格式的随机颜色，可以使用以下示例代码：
// 生成随机 RGB 颜色函数
function randomRGBColor() {
var r = Math.floor(Math.random() * 256); // 生成 0 到 255 之间的随机整数
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
// 调用函数生成随机 RGB 颜色
var randomRGBColorValue = randomRGBColor();
console.log(randomRGBColorValue);
在这个示例中，我们定义了 randomRGBColor 函数，它生成一个随机的 RGB 格式的颜色。我们使用 Math.random() 生成 0 到 255 之间的随机整数，分别表示红色、绿色和蓝色通道的值。
最后，我们将 RGB 值拼接为字符串，形式为 "rgb(r, g, b)"，并将其作为随机颜色的返回值。
通过调用 randomRGBColor() 函数，你可以获取一个随机的 RGB 格式的颜色。
请注意，由于使用了 Math.random()，每次运行代码时都会得到一个不同的随机颜色。
六、随机验证码
当使用Markdown格式时，以下是生成验证码的示例代码及其相应的说明：
// 生成验证码函数
function generateVerificationCode(length) {
var code = '';
for (var i = 0; i < length; i++) {
var randomChar = Math.random().toString(36).slice(2, 3); // 生成随机的数字或小写字母
code += randomChar;
}
return code;
}
// 调用函数生成验证码
var verificationCode = generateVerificationCode(4);
console.log("验证码：" + verificationCode);
这段代码使用JavaScript语言生成验证码的示例。以下是对代码的说明：
-
generateVerificationCode函数：这个函数用于生成验证码，接受一个参数length，表示验证码的长度。 -
code变量：这个变量用于存储生成的验证码。 -
for循环：通过循环控制生成验证码的长度，循环内部通过Math.random().toString(36).slice(2, 3)生成随机的数字或小写字母，并将其拼接到code变量中。 -
return语句：函数返回生成的验证码code。 -
调用函数：通过调用
generateVerificationCode函数，并传入参数4来生成一个长度为 4 的验证码。 -
输出结果：使用
console.log打印生成的验证码。
通过运行代码，你将在控制台中看到类似如下的输出结果：
验证码：3kj9
七、随即动画
生成随机动画效果可以使用JavaScript结合CSS或SVG来实现。
以下是一个示例代码，演示如何使用CSS动画生成随机的旋转动画效果：
DOCTYPE html>
<html>
<head>
<style>
.random-animation {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
style>
head>
<body>
<div class="random-animation">div>
<script>
function generateRandomAnimation() {
var elements = document.getElementsByClassName("random-animation");
for (var i = 0; i < elements.length; i++) {
var randomRotation = Math.floor(Math.random() * 360);
elements[i].style.animationDelay = Math.random() + "s";
elements[i].style.transform = "rotate(" + randomRotation + "deg)";
}
}
generateRandomAnimation();
script>
body>
html>
在这个示例中，我们定义了一个CSS动画 rotate，它使一个红色的正方形在2秒内无限循环地旋转一周。
通过使用JavaScript，我们将动画应用于具有 random-animation 类的元素。 generateRandomAnimation 函数通过循环遍历所有具有 random-animation 类的元素，并为每个元素设置随机的旋转角度和动画延迟时间。
当你在浏览器中运行上述代码时，将显示一个旋转的红色正方形，它的旋转速度和起始角度是随机生成的。
你可以根据需要修改CSS和JavaScript代码，以实现不同类型的随机动画效果。通过结合CSS属性和JavaScript的随机数生成，你可以创造出各种有趣和多样化的随机动画效果。