随机颜色：使用一行 JavaScript 代码生成随机颜色

但，

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

你是否曾经因为要测试一些简单的功能，而感到无聊或厌倦，不得不为不同的 div 或 span 元素编写冗长的随机颜色代码？

这里提供一个简单的解决方案。以下代码片段生成一个十六进制格式的随机颜色。

var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//generates a random color -> #56eec7

就是这样！🥳 你可以把这段代码放在一个函数里，每次需要随机颜色的时候就调用这个函数。

function generateRandomColor()
{
    var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    return randomColor;
    //random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa

好了，这个小把戏就到此为止了。如果你赶时间，可以就此离开。

但，

所以，让我们把代码分成 3 个部分。

1. 为什么是这个数字16777215？

• 这需要一点数学知识。我们都知道颜色的范围从#000000（漆黑）到#ffffff（纯白）。
• 根据 RGB 值，从黑色到白色存在的颜色数量为16777216。
• 这可以通过排列组合公式轻松计算出来。[result = m to the power of n => 16 to power of 6 => 16777216]
• 然而，我们的最终目标是将该数字转换为十六进制格式，并分别16777216转换为 167777215 和167777215。因此，我们选择167777215作为十六进制转换的最大数字。100000016777215ffffff

2.随机性

• 由于我们需要输出结果具有一定的随机性，因此我们将魔法数字乘以一个函数，Math.random()该函数返回一个介于 0（含）和 1（不含）之间的浮点数。```javascript

Math.random()*16777215
//->9653486.355498075

 - As seen the output is floating point and we need to cut down it to an integer for hex conversion and hence we use `Math.floor()` for that
```javascript


Math.floor(Math.random()*16777215)
//->96953486

3.十六进制转换

• 现在我们进入了最后阶段，也就是代码的最后一部分。要将数字转换为十六进制格式字符串，我们有一个非常巧妙的方法toString()，它接受一个数字作为参数，该参数指定要转换成的格式。
• 由于我们要将其转换为十六进制字符串，因此我们将 16 作为参数传递，如下所示：```javascript

(96953486).toString(16)
//->934cee
Math.floor(Math.random()*16777215).toString(16);
//->12ef556

    - All we need to now is just attach # before the string

```javascript


var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//->#19feac

搞定！
恭喜你！
你已成功完成帖子撰写，
祝你编程愉快！