这是什么十六进制颜色代码？！（如何在JavaScript中生成随机十六进制颜色代码）

在我最近的Flatiron School 项目中，我需要能够以编程方式随机更改页面上某个元素的背景颜色。我需要的是一个可重用的函数，可以onclick对页面上的不同元素调用。以下是我找到的两种实现方法：

首先，我知道我不想在任何地方存储一堆预设颜色。维护一个包含预设颜色代码的数组或对象会很麻烦，而且我希望颜色选择是真正随机的。我决定使用十六进制颜色代码，因为它们相对较短，而且组成它们所需的数据（数字 0-9 和字母 af）也不会占用太多空间。这就是我最初（有点“偷懒”）的解决方案的由来。

首先，我们创建一个包含所有可能的十六进制数字的数组：

 js 
const digits = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']

接下来，我们需要设置基础十六进制代码字符串：

let hexCode = "#" 

我们已经设置好了一个包含哈希/八位字节的字符串，所以我们只需将数字附加到该字符串即可。

接下来，我们需要从数组中随机选择一个十六进制数字。为此Math.round()，我们使用Math.random()`and` 函数来获取数组中随机选择的索引。得到该数字后，我们将其附加到十六进制代码字符串中，直到字符串长度为 7 个字符（6 个数字 + 井号/八位符号），因为十六进制颜色代码是 6 位数字：

while( hexCode.length < 7 ){
  hexCode += digits[ Math.round( Math.random() * digits.length ) ]
}

我们乘以数组Math.random()元素个数digits.length（或数组元素个数digits），因为该Math.random()函数返回的浮点数介于 0 和 1 之间。通过将该浮点数乘以数组元素个数digits，我们确保始终得到一个介于 0 和数组元素个数之间的浮点数。我们用 `if` 函数包装该函数，Math.round()将返回的浮点数四舍五入到最接近的整数，这样数组元素个数就包含了 0 和数组的总长度。然后，我们使用这个随机整数作为索引来选择digits数组中的元素。

完成这一步后，我们只需要return hexCode……，最终的函数如下所示：

function generateRandomHexCode(){
  const digits = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']

  let hexCode = "#" 

  while( hexCode.length < 7 ){
    hexCode += digits[ Math.round( Math.random() * digits.length ) ]
  }

  return hexCode 
}

以下是该函数的一些示例输出：

> generateRandomHexCode()
'#fd88d4'
> generateRandomHexCode()
'#349cba'
> generateRandomHexCode()
'#43a29e'
> generateRandomHexCode()
'#1a1d94'

这完全符合我们的需求！但在找到这个解决方案之后，我仍然想知道是否有更编程的方式来生成十六进制数字，结果发现确实有！

首先，我们来谈谈十六进制（或称16进制）数字的工作原理。十六进制数字包含十进制数字0-9和字母a、b、c。它们分别对应于十进制（或称10进制）数字0-15。以下是一个简表：

所以，如果我们能找到一种方法将十进制数转换为另一种进制，我们只需要生成一个 0 到 15 之间的随机数，然后将其转换为 16 进制即可。在 JavaScript 中，我们可以使用该方法.toString()并传入基数，快速轻松地将数字转换为另一种进制。

例如，我们可以使用以下方法将数字转换为二进制：.toString(2)

  > (10).toString(2)
  '1010'

  /* if you do not pass the number to `.toString()` 
inside of parentheses you will get a syntax error */

让我们看看用几个十进制数转换成十六进制后会发生什么：

  > (0).toString(16)
  '0'
  > (11).toString(16)
  'b'
  > (5).toString(16)
  '5'
  > (15).toString(16)
  'f'

太好了！这正是我们所期望的，也是我们需要的！

利用这些知识，我们可以将十六进制代码随机化函数转换成如下形式：

  function generateRandomHexCode() {
    let hexCode = "#" 

    while ( hexCode.length < 7 ) {
      hexCode += (Math.round(Math.random() * 15)).toString(16) 
    }

    return hexCode 
  }

在这个版本的函数中，我们使用Math.round()和Math.random() * 15生成 0 到 15 之间的随机数，然后使用 将该数字转换为其十六进制等效值.toString(16)，并将新生成的数字附加到hexCode基数上，直到我们有 6 位数字。

以下是一些生成的十六进制代码：

  > generateRandomHexCode()
  '#d5758c'
  > generateRandomHexCode()
  '#26711b'
  > generateRandomHexCode()
  '#8deca6'
  > generateRandomHexCode()
  '#3df62c'
  > generateRandomHexCode()
  '#1a293a'

出色的！

您可以使用此输出更新项目中的color`<div>`和 `<span>` 元素，例如使用以下代码：backgroundColor

  someElement.style.backgroundColor = generateRandomHexCode()

您可以在下面的代码示例 CodePen 中看到这段代码的实际运行效果。

如果您知道其他十六进制代码生成方法，请告诉我；如果您在自己的项目中尝试了这种方法，也请务必告诉我！

xx Emily/ @thecodepixi