16

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

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

4

4 回答 4

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

hex.toString(16)将十六进制转换为 base 中的字符串数字表示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 个字符的一部分。

于 2013-09-16T05:19:24.207 回答
7

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

于 2013-09-16T05:17:08.207 回答
1

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

一旦我们有了这个随机数，我们就使用“.toString(16)”方法将其转换为十六进制，16 表示我们想要十六进制转换。

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

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

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

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

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

于 2013-09-16T05:36:22.010 回答
-1 
/* 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>
于 2020-03-23T04:14:41.327 回答