JS随机生成十六进制颜色的另一个方法
<style>.mama p { margin: 10px 0; font-size: 18px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="mama">
<p>先上代码：</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">width:</span> 400px;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">padding:</span> 20px;</cl-cd>
<cl-cd data-idx="6">}</cl-cd>
<cl-cd data-idx="7"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="8"><br></cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="10"><br></cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="12"><br></cl-cd>
<cl-cd data-idx="13"><span class="tBlue">let</span> mkColor = () => {</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">let</span> str = <span class="tMagenta">'0123456789abcdef'</span>, res=<span class="tMagenta">"#"</span>;</cl-cd>
<cl-cd data-idx="15"> <span class="tRed">Array</span>.from({<span class="tBlue">length:</span> 6}).forEach(item => {</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">let</span> idx =<span class="tRed">Math</span>.floor(<span class="tRed">Math</span>.random() * 16);</cl-cd>
<cl-cd data-idx="17"> res += str.slice(idx, idx +1);</cl-cd>
<cl-cd data-idx="18"> });</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">return</span> res;</cl-cd>
<cl-cd data-idx="20">};</cl-cd>
<cl-cd data-idx="21"><br></cl-cd>
<cl-cd data-idx="22">mydiv.style.background = mydiv.innerText = mkColor();</cl-cd>
<cl-cd data-idx="23"><br></cl-cd>
<cl-cd data-idx="24"></<span class="tDarkRed">script</span>></cl-cd>
</div>
<p>这组代码，我设计一个div元素，用其背景呈现生成的随机颜色，并给出十六进制颜色代码。JS是重点部分：</p>
<p>mkColor 函数就是用来生成随机十六进制颜色的。14行代码，声明两个变量，str 变量是16进制所需的数字，a-f以及0-9，res 变量是颜色字串，它的初始值是 #，这是十六进制颜色的前缀符号。接着，用 forEach 循环从 str 字符串中分六次随机获取数字，一一追加给 res 变量（也可以使用for循环）。最后，返回 res 变量。</p>
<p>22行，调用 mkColor 函数，并将结果作用于 mydiv 的背景且在其上呈现颜色字串。</p>
</div> <div class="mama">
<p>生成十六进制随机颜色方法很多，我们帖子里最常用的方法是：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">let</span> color = <span class="tRed">Math</span>.random().toString(16).substr(-6);</cl-cd>
</div>
<p>它的原理是：Math.random() 随机数会得到一整串的浮点数，我们把这个浮点数转换成十六进制字符串，然后从末尾截取6个字符。</p>
</div>
一个个地找6个数字字母出来，就组成颜色了，这个真棒{:4_199:} 感觉比原来常用的那个能找得更全面，应是所有组合都可能出现。 红影 发表于 2024-3-1 14:26
感觉比原来常用的那个能找得更全面，应是所有组合都可能出现。
道理上讲是这样 红影 发表于 2024-3-1 14:25
一个个地找6个数字字母出来，就组成颜色了，这个真棒
这就是原理呀 马黑黑 发表于 2024-3-1 16:16
道理上讲是这样
感觉你这个更靠谱{:4_187:} 马黑黑 发表于 2024-3-1 16:16
这就是原理呀
黑黑厉害，总能钻研出各种方法来。{:4_199:} 加分吃瓜{:4_173:} 马黑黑 发表于 2024-3-1 12:04
生成十六进制随机颜色方法很多，我们帖子里最常用的方法是：
let color = Math.random().toString(16).substr(-6);
贴子里常见这串随机颜色。。
现在才知道原理{:4_173:}
这个新的方法用在贴子里效果会不会有点不一样。。 南无月 发表于 2024-3-1 20:21
这个新的方法用在贴子里效果会不会有点不一样。。
应该是吧 南无月 发表于 2024-3-1 20:21
let color = Math.random().toString(16).substr(-6);
贴子里常见这串随机颜色。。
现在才知道原理{:4_ ...
以前没解释过 马黑黑 发表于 2024-3-1 20:43
应该是吧
小白又想吧，既然大家都是随机的，应该就一样的效果。。
{:4_173:} 南无月 发表于 2024-3-1 20:50
小白又想吧，既然大家都是随机的，应该就一样的效果。。
差不多的 马黑黑 发表于 2024-3-1 20:43
以前没解释过
{:4_170:}
这串也挺好，又简洁又好用。。 南无月 发表于 2024-3-1 20:51
这串也挺好，又简洁又好用。。
不过是，二者有区别：Math.random() 得到的，有固定倾向，不够随机；一楼的做法，随机性强。 马黑黑 发表于 2024-3-1 20:50
差不多的
那就是还有差别 马黑黑 发表于 2024-3-1 20:52
不过是，二者有区别：Math.random() 得到的，有固定倾向，不够随机；一楼的做法，随机性强。
一楼的随机性更强，就是代码太多。小白有点晕。。。。能变得跟二楼一样少就好了不是{:4_173:} 南无月 发表于 2024-3-1 21:02
一楼的随机性更强，就是代码太多。小白有点晕。。。。能变得跟二楼一样少就好了不是
那不好办，就得这么多代码
页:
[1]
2