准备开始

首先生成随机颜色之前。我们先要有一些基础知识，如果你有基本的概念。可以跳过。如果你不太熟悉，可以先看一下这篇文章《关于RGB》。

其次，我们要对计算机的随机有一个概念，如果你没有概念，可以看一下这篇文章《关于前端中的随机》

初阶

假如你刚开始学习js

1. 生成随机的RGB颜色值，其中r、g、b分别表示红、绿、蓝三个颜色通道。
2. 使用Math.random()函数生成0到1之间的随机数，并乘以256，得到0到255之间的随机数，分别赋值给r、g、b。
3. 将RGB值转换为十六进制形式的颜色值。
4. 使用toString(16)将r、g、b转换为十六进制字符串。
5. 使用padStart(2, '0')将十六进制字符串补齐为两位，如果不足两位则在前面补0。
6. 将三个十六进制字符串拼接在一起，前面加上"#"，得到最终的随机颜色值。
7. 返回随机颜色值。

const getRandomColor = () => {
  // 生成随机的RGB颜色值
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  // 将RGB值转换为十六进制
  return  `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};

中阶

假如你已经有一定的js基础

1. 在函数内部，使用Math.random()生成一个0到1之间的随机数。
2. 将随机数乘以16777216，得到一个0到16777216之间的随机整数。
3. 使用toString(16)将随机整数转换为十六进制字符串。
4. 如果转换后的字符串长度不足6位，使用padStart(6, '0')在字符串前面添加0，使其长度达到6位。
5. 将转换后的十六进制字符串添加#作为前缀。
6. 返回生成的随机颜色值。

const getRandomColor = () => {
  const random = Math.floor(Math.random() * 16777216).toString(16);
  return `#${random.padStart(6, '0')}`;
};

高阶

简化的写法

因为所有颜色一共有16777216种，所以我们可以直接生成一个0到16777216之间的随机整数，然后使用toString(16)将其转换为十六进制字符串，最后使用padStart(6, '0')在字符串前面添加0，使其长度达到6位，最后添加#作为前缀，得到最终的随机颜色值。

const getRandomColor = `#${Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0')}`

玩一下

问题

我相信你在玩的时候发现一个问题，那么就是颜色是随机的。没有问题，但是我们需要判断一下他是更亮一点，还是更暗一点，用来设置文字的颜色，更容易被看到。

解决

简化的写法

我们可以判断一下颜色的亮度，如果亮度大于186，那么我们就设置为黑色，否则就设置为白色。

const getTextColor = (color) => {
  // 先将颜色转换为rgb
  const rgb = color.match(/\d+/g);
  // 计算亮度
  const light = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114;
  // 如果亮度大于186，那么我们就设置为黑色，否则就设置为白色。
  return light > 186 ? '#000000' : '#ffffff';
};

再玩一下

完活

相信你通过这篇文章学习到的知识以后一定可以改变世界~