评论资讯 [ 总 192 则 ]
·小希 - 2024-9-14 15:21
·飞飞 - 2024-9-14 15:19
·悄然 - 2024-9-14 10:37
·悄然 - 2024-9-13 19:39
·飞飞 - 2024-9-13 19:36
·小希 - 2024-9-13 19:32
·了了 - 2024-9-13 07:52
·悄然 - 2024-9-12 19:40
·飞飞 - 2024-9-12 19:35
·小希 - 2024-9-12 19:33
·飞飞 - 2024-9-14 15:19
·悄然 - 2024-9-14 10:37
·悄然 - 2024-9-13 19:39
·飞飞 - 2024-9-13 19:36
·小希 - 2024-9-13 19:32
·了了 - 2024-9-13 07:52
·悄然 - 2024-9-12 19:40
·飞飞 - 2024-9-12 19:35
·小希 - 2024-9-12 19:33
友情链接
网站统计
随机生成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条]