评论资讯 [ 总 424 则 ]
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
友情链接
网站统计
随机生成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条]