这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【 如何实现随机颜色 他们的性能如何】
大家好,我是IT修真院深圳分院第十一期学员,一枚正直纯洁善良的WEB程序员。
今天给大家分享一下,修真院官网JS任务一, 如何实现随机颜色 他们的性能如何
1.背景介绍
相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示。这三种都是不支持透明色的。所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果。
2.知识剖析
Math.ceil(); //向上取整。
Math.floor(); //向下取整。
Math.round(); //四舍五入。
Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494
Math.ceil(Math.random()*10); // 获取从1到10的随机整数 ,取0的概率极小。
Math.round(Math.random()); //可均衡获取0到1的随机整数。
Math.floor(Math.random()*10); //可均衡获取0到9的随机整数。
Math.round(Math.random()*10); //基本均衡获取0到10的随机整数,其中获取最小值0和最大值10的几率少一半。
因为结果在0~0.4 为0,0.5到1.4为1...8.5到9.4为9,9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。
2.随机颜色的几种形式
1.HSL
2.RGB
3.16进制
3.常见问题
如何随机多个颜色
4.解决方案
/* 随机颜色的函数 */ /* function color() { return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6) } */ // 颜色随机2 /* function color(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var rgb = 'rgb('+r+','+g+','+b+')'; console.log(rgb); return rgb; } */ //颜色随机3 通过hsl //hsl是hue色调,starution饱和度,lightness亮度,优点:浏览器适应度较高 /* function color(){ var h = Math.floor(Math.random()*361); var s = Math.floor(Math.random()*101)+"%"; var l = Math.floor(Math.random()*101)+"%"; var hsl = 'hsl('+h +','+ s +','+ l +')'; console.log(hsl); return hsl; } */ //通过数组随机6位 /* function color(){ return "#"+(function(color){ return(color+="0123456789abcdef"[Math.floor(Math.random()*16)])&&(color.length==6)? color:arguments.callee(color); })(""); } */
6.扩展思考
7、参考文献
js产生随机数函数 - 鱼塘总裁 - 博客园
8、更多讨论
1、问:[2,8]之间的随机数如何实现
答: Math.random()*6+2
2、问:以上几种性能如何
前三种请求较少,
第四种数组需要N次请求,不推荐
3、如何限定颜色范围
将随机颜色范围指定,然后带入随机数中
更多内容,可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院:https://www.jnshu.com,初学者转行到互联网的聚集地