评论资讯 [ 总 494 则 ]
·飞飞 - 2025-4-22 21:44
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
·飞飞 - 2025-4-1 19:52
·飞飞 - 2025-3-31 21:06
·小希 - 2025-3-30 22:56
·悄然 - 2025-3-25 18:39
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
·飞飞 - 2025-4-1 19:52
·飞飞 - 2025-3-31 21:06
·小希 - 2025-3-30 22:56
·悄然 - 2025-3-25 18:39
友情链接
网站统计
随机生成rgba颜色
rgb() 和 rgba() 都是CSS函数,用来表达颜色,后者与前者的区别仅在于多设置了 alpha 值(即透明度值,0表示完全透明,1表示不透明)。
很多场景,我们需要使用随机的 rgb 或 rgba 颜色,所以,编写一个随机生成 rgba 的函数很有必要。看下面的代码是否够简洁:
let generateRgba = (opacity) => { let ar = [256,256,256].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 各值的取值采用整数,我将数组 [256,256,256] 用 map 方法一次性将数组元素取随机数而后取向下取整,然后再追加不透明值,最后返回完整的 rgba() 格式的颜色表达式。
调用方法,比如,我们给id="mybox"的HTML元素设置背景颜色:
mybox.style.background = generateRgba();
假如我们希望指定透明度,可以这样调用函数:
mybox.style.background = generateRgba(0.8);
效果演示:可单击下面的方框查看
前一篇: svg分组title信息的实现
下一篇: JS数组按中间大两头小的次序排列
发表评论:
评论列表 [0条]