如何实现随机颜色他们的性能如何

从零开始学前端

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-02-14 02:04:51 发布 652 阅读 AI 写同款· GEO 优化 ›

matplotlib的配色(随机颜色函数，各种渐变色，彩虹色) plt和sns的一些配色，渐变色，彩虹色阅读详情

这里是修真院前端小课堂，每篇分享文从
【如何实现随机颜色他们的性能如何】

大家好，我是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.扩展思考