在 JavaScript 中,生成随机颜色的几种可能方法
在这篇文章中,我将总结几种在 JavaScript 中随机生成颜色的方法。
所以,请保存这篇文章!
您可能已经知道颜色是如何表示的,即以“#”为前缀的十六进制代码 -->#RRGGBB
黑色的代码 -->#000000
白色的代码 -->#ffffff
因此,数值越高,颜色越浅,反之亦然。
以下是不同的方法:
- 方法 1在这种方法中,只需取一个包含所有可能的十六进制字符的字符串,然后从中随机选择并将它们连接起来,形成一个 6 位数的十六进制代码。
const s = "0123456789ABCDEF";
function getRandomColor()
{
let col = "#";
let temp =0;
for(let i=0;i<6;++i)
{
temp = Math.floor( Math.random() * s.length ); // generates number between 0-15
col = col + s[temp];
}
return col;
}
如果只想生成更浅/更深的颜色,我们可以分别使用 sLight 或 sDark。
const sLight="789ABCDEF";
const sDark="01234567";
- 方法 2与第一种方法类似,但这里我们可以使用预定义的字符串而不是十六
toString(16)进制来转换为 HexaDecimal。
function getRandomColor(){
let color = "#";
for(let i=0;i<6;++i)
color += (Math.floor( Math.random() * 16 ).toString(16) );
return color;
}
- 方法三:我们可以使用以下 ES6 方法:
const getRandomHex = from => to => () =>
Math.floor(Math.random() * (to - from) + from).toString(16);
const getRangedRandomColor = from => to => () =>
`#${[...Array(6)].map(getRandomHex(from)(to)).join("")}`;
const getRandomColor = getRangedRandomColor(0x0)(0xf);
const getRandomColorLight = getRangedRandomColor(0x7)(0xf);
const getRandomColorDark = getRangedRandomColor(0x0)(0x7);
感谢 @lukeshiru 提供的信息,你可以在我上一篇文章的评论区找到详细的解释(链接在此)。
- 方法四
function getRandomColor() {
function c() {
var hex = Math.floor(Math.random()*256).toString(16);
return ("0"+String(hex)).substr(-2); // pad with zero
}
return "#"+c()+c()+c();
}
substr(-2) 表示取字符串的最后两个字符。
- 方法 5:这是我在 StackOverflow 上找到的一个很棒的单行代码方法,可以实现同样的功能。
function getRandomColor() {
return '#'+(Math.random().toString(16)+'00000').slice(2,8);
}
以上是我的一些选择,如果你想深入了解,可以看看StackOverFlow 上的这个帖子。
您可以保存这篇文章以备将来参考,也欢迎在下方评论区发表您的意见!
文章来源:https://dev.to/prakhart111/ Different-possible-methods-for-generate-a-colour-randomly-in-js-3l1