一句代码生成rgba随机颜色

马黑黑

代码

var mkRgba = (r,g,b,a) => `rgba(${[r,g,b].map(x => Math.round(Math.random() * (x >= 0 ? x : 255)))},${a ? a : Math.random().toFixed(2)})`;

函数解释：

四个参数中，使用 map 内置函数迭代前三个参数 r、g、b，使之生成rgb三原色随机代码，期间判断参数值是否大于等于0，符合条件使用该参数数值否则使用 255，然后对之取随机数；alpha通道值则依据参数是否配置，若配置使用该配置作为不透明度数值、若不配置使用0~1的随机数（去2位小数点）。函数可以不传参，这将得到rgb都随机、a也随机的颜色，传参则应至少传完rgb三个参数。传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。

应用实例

示例代码

<style> #mydiv { margin: 20px auto; display: grid; place-items: center; width: 400px; height: 200px; position: relative; } #outMsg { padding: 10px 20px; background: #eee; width: fit-content; border-radius: 20px; } </style>   <div id="mydiv"><p id="outMsg"></p></div>   <script> var mkRgba = (r,g,b,a) => `rgba(${[r,g,b].map(x => Math.round(Math.random() * (x >= 0 ? x : 255)))},${a ? a : Math.random().toFixed(2)})`; mydiv.onclick = () => outMsg.innerText = mydiv.style.background = mkRgba(); mydiv.click(); </script>

马黑黑

红影 发表于 2024-5-16 14:09
一句代码就能生成rgba随机颜色，这个太厉害了。
虽然“map 内置函数迭代前三个参数 r、g、b”不 ...

map，作为JS内置函数，它的作用就是对数组元素进行迭代，在遍历数组元素时通过引用函数对数组元素进行处理，最后将处理返回一个新的数组。看下面的示例：

let ar1 = [1,3,5,7]; //声明数组 ar1 并赋值
//下面声明数组 ar2，ar2 通过 map 迭代 ar1 并计算出数组元素与自身的乘积然后赋值给 ar2
let ar2 = ar1.map( x => x * x);

console.log(ar1); //[1, 3, 5, 7] - ar1 不被改变
console.log(ar2); //[1, 9, 25, 49] - ar2 是 ar1 迭代出来的新数组

上例，map 迭代数组 ar1 的时候，它引用的函数因为简单直接写在 map 迭代语句里，x => x * x，x 代表数组元素自身，=> 表示箭头函数，x * x 是函数运算的内容。写成普通函数可以是酱紫：

function count(n) {
    return n * n;
}

或用箭头函数：

let count = (n) => n * n;

然后 ar2 的赋值语句写成：

let ar2 = ar1.map(x => count(x));

使用独立函数后的完整代码：

let count = (n) => n * n;

let ar1 = [1,2,3];
let ar2 = ar1.map(x => count(x));

console.log(ar1);
console.log(ar2);

南无月

这个加了透明度，颜色比之前更浅一点

南无月

传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。
试了这句，还没试成

马黑黑

南无月 发表于 2024-5-16 12:46
传参可灵活定制颜色范围，比方说想要红色系的随机颜色，可这样处理：mkRgba(255, 0, 0, .9)。
试了这句， ...

你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里

红影

马黑黑 发表于 2024-5-16 13:11
你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里

嗯嗯，把mydiv.style.background = mkRgba();括号里换成红色，就只在红色范围里流转了。绿色也一样，把255和后面的0换个位置。只是这样的透明度是固定的了，不再是随机的。

红影

一句代码就能生成rgba随机颜色，这个太厉害了。
虽然“map 内置函数迭代前三个参数 r、g、b”不太好懂，但至少能实现一句就能变色了。

红影

传参还可以配置两个，255, 0, 255, .9，然后去感受设定情况下的颜色变化，真有趣

马黑黑

红影 发表于 2024-5-16 14:13
传参还可以配置两个，255, 0, 255, .9，然后去感受设定情况下的颜色变化，真有趣

是这么设计的

南无月

马黑黑 发表于 2024-5-16 13:11
你就拿 255, 0, 0, .9 作为传参放到实例代码的 mkRgba() 括号里

实例代码。。
我的错

马黑黑

南无月 发表于 2024-5-16 20:12
实例代码。。
我的错

函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：

let add = (a, b, c) => a + b + c; // 把三个数相加的函数

let res = add(20, 13, 6); //调用 add 函数 并赋值给 res 变量
console.log(res); //把 res 即运算结果打印到控制台

南无月

马黑黑 发表于 2024-5-16 21:00
函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：

let add = (a, b, c) => ...

好哒，我就说老师的代码怎么可能试不出来。原来还是我的错

马黑黑

南无月 发表于 2024-5-16 21:05
好哒，我就说老师的代码怎么可能试不出来。原来还是我的错

对JS还不太熟

南无月

马黑黑 发表于 2024-5-16 21:00
函数的调用，如果有返回值，你只要要声明一个变量去获取它。参考下面的例子：

let add = (a, b, c) => ...

先规定好了ADD,它就会很靠谱的执行这就是一个小型编程呗

马黑黑

南无月 发表于 2024-5-16 21:07
先规定好了ADD,它就会很靠谱的执行这就是一个小型编程呗

就是几个数相加，多少个就要多少个参数

南无月

马黑黑 发表于 2024-5-16 21:06
对JS还不太熟

我的政策么，就是不熟不要紧

南无月

马黑黑 发表于 2024-5-16 21:07
就是几个数相加，多少个就要多少个参数

这个听明白了

红影

马黑黑 发表于 2024-5-16 18:15
是这么设计的

去试了半天，感受颜色的变化。

红影

马黑黑 发表于 2024-5-16 18:28
map，作为JS内置函数，它的作用就是对数组元素进行迭代，在遍历数组元素时通过引用函数对数组元素进行处 ...

谢谢黑黑的详细解答，现在看明白了。“x 代表数组元素自身”，开始时对x时什么不知道，对map也不清楚呢。

马黑黑

红影 发表于 2024-5-16 21:38
谢谢黑黑的详细解答，现在看明白了。“x 代表数组元素自身”，开始时对x时什么不知道，对map也不清楚呢。 ...

x 是参数，下面两个表达方法是等价的：

x => ...

function(x) {  }