JS随机生成十六进制颜色的另一个方法

马黑黑

先上代码：

<style> #mydiv {     width: 400px;     height: 200px;     padding: 20px; } </style>
<div id="mydiv"></div>
<script>
let mkColor = () => {     let str = '0123456789abcdef', res="#";     Array.from({length: 6}).forEach(item => {         let idx = Math.floor(Math.random() * 16);         res += str.slice(idx, idx +1);     });     return res; };
mydiv.style.background = mydiv.innerText = mkColor();
</script>

这组代码，我设计一个div元素，用其背景呈现生成的随机颜色，并给出十六进制颜色代码。JS是重点部分：

mkColor 函数就是用来生成随机十六进制颜色的。14行代码，声明两个变量，str 变量是16进制所需的数字，a-f以及0-9，res 变量是颜色字串，它的初始值是 #，这是十六进制颜色的前缀符号。接着，用 forEach 循环从 str 字符串中分六次随机获取数字，一一追加给 res 变量（也可以使用for循环）。最后，返回 res 变量。

22行，调用 mkColor 函数，并将结果作用于 mydiv 的背景且在其上呈现颜色字串。

马黑黑

生成十六进制随机颜色方法很多，我们帖子里最常用的方法是：

let color = Math.random().toString(16).substr(-6);

它的原理是：Math.random() 随机数会得到一整串的浮点数，我们把这个浮点数转换成十六进制字符串，然后从末尾截取6个字符。

红影

一个个地找6个数字字母出来，就组成颜色了，这个真棒

红影

感觉比原来常用的那个能找得更全面，应是所有组合都可能出现。

马黑黑

红影 发表于 2024-3-1 14:26
感觉比原来常用的那个能找得更全面，应是所有组合都可能出现。

道理上讲是这样

马黑黑

红影 发表于 2024-3-1 14:25
一个个地找6个数字字母出来，就组成颜色了，这个真棒

这就是原理呀

红影

马黑黑 发表于 2024-3-1 16:16
道理上讲是这样

感觉你这个更靠谱

红影

马黑黑 发表于 2024-3-1 16:16
这就是原理呀

黑黑厉害，总能钻研出各种方法来。

樵歌

加分吃瓜

南无月

马黑黑 发表于 2024-3-1 12:04
生成十六进制随机颜色方法很多，我们帖子里最常用的方法是：

let color = Math.random().toString(16).substr(-6);
贴子里常见这串随机颜色。。
现在才知道原理

南无月

这个新的方法用在贴子里效果会不会有点不一样。。

马黑黑

南无月 发表于 2024-3-1 20:21
这个新的方法用在贴子里效果会不会有点不一样。。

应该是吧

马黑黑

南无月 发表于 2024-3-1 20:21
let color = Math.random().toString(16).substr(-6);
贴子里常见这串随机颜色。。
现在才知道原理{:4_ ...

以前没解释过

南无月

马黑黑 发表于 2024-3-1 20:43
应该是吧

小白又想吧，既然大家都是随机的，应该就一样的效果。。

马黑黑

南无月 发表于 2024-3-1 20:50
小白又想吧，既然大家都是随机的，应该就一样的效果。。

差不多的

南无月

马黑黑 发表于 2024-3-1 20:43
以前没解释过

这串也挺好，又简洁又好用。。

马黑黑

南无月 发表于 2024-3-1 20:51
这串也挺好，又简洁又好用。。

不过是，二者有区别：Math.random() 得到的，有固定倾向，不够随机；一楼的做法，随机性强。

南无月

马黑黑 发表于 2024-3-1 20:50
差不多的

那就是还有差别

南无月

马黑黑 发表于 2024-3-1 20:52
不过是，二者有区别：Math.random() 得到的，有固定倾向，不够随机；一楼的做法，随机性强。

一楼的随机性更强，就是代码太多。小白有点晕。。。。能变得跟二楼一样少就好了不是

马黑黑

南无月 发表于 2024-3-1 21:02
一楼的随机性更强，就是代码太多。小白有点晕。。。。能变得跟二楼一样少就好了不是

那不好办，就得这么多代码