Question

我是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)基本上是什么意思？

有人可以向我说明上述代码是如何运作的。

Answer 1

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个字符。

Answer 2

hex.toString(16)将hex转换为基本16中的字符串数字表示形式。然后它在字符串的开头附加000000以确保它至少是长度为6.并且substr(-6)获取结果字符串的最后6个字符。这样你总能获得# + 6个十六进制字符。代表颜色。

Answer 3

代码首先选择一个随机数并使用“＆amp; 0xFFFFFF”技术确保范围为0到16777215.

一旦我们得到那个随机数，我们使用“.toString（16）”方法转换为十六进制，16表示我们需要十六进制转换。

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

例如，如果随机数为255（十六进制为FF），则不能使用它，因为它不是精确的6位数。

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

在这里，我们看到另一种技术，你会看到固定数量的0添加到字符串中，然后固定长度被截断结束，确保你获得6位数并正确填充。

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

Answer 4

/* 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>

在javascript中获取随机背景颜色

4 个答案: