生成随机rgba颜色
rgb() 和 rgba() 都是CSS函数，用来表达颜色，后者与前者的区别仅在于多设置了 alpha 值（即透明度值，0表示完全透明，1表示不透明）。很多场景，我们需要使用随机的 rgb 或 rgba 颜色，所以，编写一个随机生成 rgba 的函数很有必要。看下面的代码是否够简洁：
let generateRgba = (opacity) => {
let ar = .map((item) => Math.floor(Math.random() * item));
ar.push( opacity || (.5 + Math.random() * .5).toFixed(1));
return 'rgba(' + ar.join(',') + ')';
}
函数 generateRgba(opacity) 的参数，若调用者未给出该参数，则随机在 0.5 - 0.9 间取值。rgb 各值的取值采用整数，我将数组 用 map 方法一次性将数组元素取随机数而后取向下取整，然后再追加不透明值，最后返回完整的 rgba() 格式的颜色表达式。
调用方法，比如，我们给id="mybox"的HTML元素设置背景颜色：
mybox.style.background = generateRgba();
假如我们希望指定透明度，可以这样调用函数：
mybox.style.background = generateRgba(0.8);
<style>
#mydiv {
margin: 20px auto;
padding: 10px;
width: 400px;
height: 200px;
border: 1px solid gray;
}
</style>
<h2>演示：单击下面方框查看效果</h2>
<div id="mydiv"></div>
<script>
let generateRgba = (opacity) => {
let ar = .map((item) => Math.floor(Math.random() * item));
ar.push( opacity || (.5 + Math.random() * .5).toFixed(1));
return 'rgba(' + ar.join(',') + ')';
}
mydiv.onclick = () => mydiv.innerText = mydiv.style.background = generateRgba();
</script>
这个不但能生成随机色，还能随机生成opacity 值，太棒了{:4_199:} 随机点着，欣赏着各种漂亮颜色{:4_187:} 看到这个，又想起那个十六进制颜色在线调配那个帖子了，那个也特别喜欢。 醉美水芙蓉 发表于 2023-8-17 11:57
这个用在帖子七彩的，真漂亮！黑黑老师牛！
rgb只是一个实现方式之一 红影 发表于 2023-8-17 10:30
看到这个，又想起那个十六进制颜色在线调配那个帖子了，那个也特别喜欢。
在CSS2时代，建议使用16进制色彩体系，现在，主张使用rgb模式。不过这两种都是可以的，rgb的特点是与浏览器更亲近，同时加入a通道更简单、可靠。 红影 发表于 2023-8-17 10:29
随机点着，欣赏着各种漂亮颜色
点击方框只是为了查看效果，关键是要能理解其中的原理 红影 发表于 2023-8-17 10:16
这个不但能生成随机色，还能随机生成opacity 值，太棒了
实现的方法很多，这个大约是比较简单的 马黑黑 发表于 2023-8-17 12:28
在CSS2时代，建议使用16进制色彩体系，现在，主张使用rgb模式。不过这两种都是可以的，rgb的特点是与浏览 ...
是的，这个和hsl一样，都能加入a通道，对透明度的调整在设置颜色的同时就是完成，很方便。 马黑黑 发表于 2023-8-17 12:29
点击方框只是为了查看效果，关键是要能理解其中的原理
map 方法不熟悉，不过这个很简洁，一下子就能取得随机数呢。 马黑黑 发表于 2023-8-17 12:30
实现的方法很多，这个大约是比较简单的
是的，代码非常少。 红影 发表于 2023-8-17 13:29
是的，代码非常少。
高效就好 本帖最后由 马黑黑 于 2023-8-17 18:51 编辑
红影 发表于 2023-8-17 13:29
map 方法不熟悉，不过这个很简洁，一下子就能取得随机数呢。
map方法，不修改原数组，是在原数组的基础上加工里面数组元素的内容，然后将新的数组内容生成一个新的数组。map方法，会跳过空数组。例如：
<div id="mydiv"></div>
<script>
let arr1 = new Array(20);
let arr2 = arr1.map((item,idx) => idx);
mydiv.innerText = arr1 + '\n' + arr2;
</script>
结果是这样：
,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,
两行都是空数组，map不处理 arr1 的任何一个数组元素。这是因为，arr1 = new Array(20) 这一句，它只生成了一个有数组长度、没有数组元素内容的数组 arr1，map会跳过空数组元素即不做处理。
倘若我们给 arr1 填充数组元素，哪怕只是填充空的数组元素：
let arr1 = new Array(20).fill('');
则，经过 map 处理后，arr1 和 arr2 两个数组打印出来，是这样：
,,,,,,,,,,,,,,,,,,,
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19
arr1没有变化，因为我们填充的是空值，但它的每一个数组元素都是有值的，不再是空的数组元素，而是具有空值的数组元素的数组，这样，map就会处理每一个arr1的数组元素最后赋值给 arr2（map以数组索引号填充了 arr2 的每一个数组元素)。 红影 发表于 2023-8-17 13:26
是的，这个和hsl一样，都能加入a通道，对透明度的调整在设置颜色的同时就是完成，很方便。
但是浏览器会更倾向于 rgb，同其他的颜色表发方式，它还是会转为 rgb，因此可以认为，直接使用 rgb 渲染速度会更快（虽然感觉不到），也更节省资源。 马黑黑 发表于 2023-8-17 18:34
高效就好
简洁的代码最需要功夫了。{:4_187:} 马黑黑 发表于 2023-8-17 18:48
map方法，不修改原数组，是在原数组的基础上加工里面数组元素的内容，然后将新的数组内容生成一个新的数 ...
要是给了这个数组的具体数字，map可以在里面随机取值？ 马黑黑 发表于 2023-8-17 18:53
但是浏览器会更倾向于 rgb，同其他的颜色表发方式，它还是会转为 rgb，因此可以认为，直接使用 rgb 渲染 ...
“同其他的颜色表发方式，它还是会转为 rgb”
这个还是第一次知道呢。 红影 发表于 2023-8-17 20:32
“同其他的颜色表发方式，它还是会转为 rgb”
这个还是第一次知道呢。
如果使用F12查看页面的元素，会发现颜色的设置都是rgb