JS随机十六进制颜色 - Javascript

在网页设计中，颜色是十分重要的一部分。使用Javascript编写随机生成的颜色代码可以让我们节约时间和精力。在这个文章中，我们将向您展示如何使用Javascript编写随机的十六进制颜色代码。

实现

我们可以通过使用Math.random()函数来生成一个随机的十六进制颜色代码。具体来说，我们可以将Math.random()生成的数字转换为十六进制，然后将其截取前六位即可。代码如下：

function getRandomColor() {
  // 生成随机颜色代码
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  // 补全前导零
  while(randomColor.length < 6){
    randomColor = '0' + randomColor;
  }
  // 返回颜色代码
  return '#' + randomColor;
}

解析

该函数的原理非常简单：使用Math.random()随机生成一个小数，然后将其转换成十六进制的颜色代码。为了确保颜色代码始终为六位，我们使用while循环来补全缺少的前导零。

另外，由于我们需要生成的是十六进制颜色代码，在JavaScript中我们需要将颜色代码前面加上“#”符号。

使用方法

使用该函数非常简单。在您的Javascript代码中引入该函数，然后使用以下代码即可生成随机颜色代码：

var randomColor = getRandomColor();
console.log(randomColor);

结论

现在，我们已经学习了如何使用Javascript编写生成随机的十六进制颜色代码的函数，您可以将其实现到任何您需要使用到颜色的Javascript代码中。

如果您想在线试用该函数，请查看下面的JSFiddle代码片段：

<button onclick="document.body.style.backgroundColor=getRandomColor()">改变背景颜色</button>

function getRandomColor() {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  while(randomColor.length < 6){
    randomColor = '0' + randomColor;
  }
  return '#' + randomColor;
}