在javascript中获取随机背景色

我是java-script的新手。每当我调用特定函数时，我都需要获得随机背景颜色。

我在网上找到了以下代码，但我不太明白它是如何工作的。

法典：

function getRandomColor () {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

上面的代码是如何工作的。我了解 Math.random（）的工作原理，但hex.toString(16)).substr(-6)基本上意味着什么？

有人可以向我澄清一下上面的代码是如何工作的。

function getRandomColor () {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

hex.toString(16) 以 16 为单位将十六进制转换为字符串数字表示形式。

语法：

number.toString(radix)

radix:用于表示数值的基数。必须是介于 2 和 36 之间的整数。

2 - The number will show as a binary value
8 - The number will show as an octal value
16 - The number will show as an hexadecimal value

substr(-6)只取最后 6 个字符，这会切断"000000"，因为它们不是最后 6 个字符的一部分。

hex.toString(16) 将hex转换为基数16中的字符串数字表示形式。然后，它将000000附加到字符串的开头，以确保其长度至少为 6。substr(-6) 取结果字符串的最后 6 个字符。这样，您始终可以获得 # + 6 个十六进制字符。它代表颜色。

代码首先选择一个随机数，并使用"&0xFFFFFF"技术确保范围类似于 0 到 16777215。

一旦我们有了这个随机数，我们就使用".toString（16）"方法转换为十六进制，16表示我们想要十六进制转换。

现在，我们可以认为我们有一个十六进制的 6 位随机数用于我们的颜色，但知道 ".toString（16）" 方法不会为我们做任何填充。

例如，如果随机数是 255，它是十六进制的 FF，则不可用，因为它的长度不是精确的 6 位。

一种技术是进行字符串长度检查，并将相应的 0 数添加到"FF"的开头以获得"0000FF"。

在这里，我们看到另一种技术，您会看到固定数量的 0 添加到字符串中，然后从末尾切掉固定长度，确保您获得 6 位数字并正确填充。

我一直使用字符串长度检查或特定的填充函数（我不知道javascript是否有） - 我只回答了这个问题，以便充分理解这个问题中显示的技术。

/* a complete html page to apply this */
<html>
    <body>
     <button type="button" onclick="setbodybgcolor()">Random Background</button>
         <script>
               function setbodybgcolor(){
                   document.body.style.backgroundColor=getRandomColor ();
               }
               function getRandomColor () {
                       var hex = Math.floor(Math.random() * 0xFFFFFF);
                       return "#" + (hex.toString(16)).substr(-6);
               }
               /* we can do this also
               function setbodybgcolor(){
                     var hex=Math.floor(Math.random()*16777215).toString(16);
                     document.body.style.backgroundColor="#"+hex;
               }*/
         </script>
     </body>
</html>

相关内容

最新更新

热门标签：