在 JavaScript 中生成随机十六进制颜色

十六进制 (Hexadecimal) 代码是一个六位数代码，也是一个三字节的十六进制数，用于表示颜色。这三个字节表示RGB，即红色、绿色和蓝色在特定颜色阴影中的数量。每个字节将表示一个介于 00 到 FF（十六进制表示法）或 0 到 255（十进制表示法）之间的数字。这表示每个颜色组件的强度从 0 到 255。

以下是用于生成随机十六进制代码的函数：

Math.random() 用于随机获取 0 到小于 1（包括小数）之间的数字。

function random_num(maximum) {
   return Math.floor(Math.random() * maximum);
}
document.write(random_num(5));
// output: 0, 1 or 2

在上例中，我们将 5 作为最大值输入。每当我们尝试执行程序时，它都会打印 0 到 4 之间的输出。

document.write(random_num());
// output: 0 to <1

在这种情况下，由于我们没有最大值作为输入值，因此每当我们运行程序时，它都会打印 0 到小于 1 之间的随机数。这就是Math.random() 函数的工作方式。

Math.floor() 是一个函数，它会将数字向下舍入到最接近的整数。

document.write(Math.floor(1.95));
// output: 1

在这里，我们可以看到输出打印为 5。因此，该值向下舍入到最接近的整数。

document.write(Math.floor(1));
// output: 1

如果传递的值是没有任何浮点数（小数点）的整数，则会将其舍入。

现在，让我们结合这些函数来生成随机十六进制数。

我们使用math.random() 生成随机数，并将其乘以16777215，因为这个数字是fffff（十六进制代码中的最高值）的十进制表示。

Math.random()*16777215

这将返回一个带有小数的随机数，例如 12421420.464841081，现在我们使用math.floor() 来去除小数并返回整数。

Math.floor(Math.random()*16777215)

现在，我们包含toString() 方法将数字转换为字符串。我们传递了 16 作为参数，因为 16 进制是十六进制。值为 16 将返回十六进制代码（包含数字和字母）。

Math.floor(Math.random()*16777215).toString(16);

示例 1

以下示例返回颜色的随机十六进制代码：

Open Compiler
<!DOCTYPE html>
<html>
   <title>Generating random Hex color</title>
<head>
   <h3>
      <div id="demo">Mouse-over on this box to get new random color</div>
      <p id="color"></p>
   </h3>
   <style>
      body {
         height: 100vh;
         padding: 1rem;
         display: grid;
         place-items: center;
         font-family: verdana;
      }
      h3 {
         background: white;
         padding: 1rem 1rem;
         text-align: center;
         border-radius: 5px 20px 5px;
      }
      p {
         display: block;
         padding: 1px;
         font-size: 20px;
         font-weight: lighter;
         font-family: verdana;
      }
   </style>
</head>
<body>
   <script>
      function hex() {
         const RanHexColor = Math.floor(Math.random()*16777215).toString(16);
         document.body.style.backgroundColor = "#" + RanHexColor;
         color.innerHTML = "#" + RanHexColor;
      }
      demo.addEventListener("mouseover", hex);
      hex();
   </script>
</body>
</html>

在输出中，每当鼠标悬停在中间的方块上时，它都会在背景上生成随机的十六进制颜色。

示例 2

在这个示例中，我们完成了获取随机十六进制颜色的任务。

slice() 方法将提取字符串的一部分。此方法接受 2 个参数（开始，结束）。开始可以是字符串中的第一个字符 (0)，结束是位置。

const mobile = 'oneplus';
document.write(mobile.slice(2));
// output: "eplus"

在上例中，由于我们只传递了开始参数，因此它从索引 2 切片到字符串的末尾。

const mobile = 'oneplus';
document.write(mobile.slice(0,3));
// output: "one"

在这个代码片段中，我们同时传递了开始和结束参数。因此，它将字符串从 0 切片到 3 并打印“one”。

const mobile = 'oneplus';
document.write(mobile.slice());
// output: "oneplus"

在这里，我们没有向参数中传递任何内容，因此默认情况下，它将采用整个字符串长度。

我们使用slice() 方法而不是Math.floor() 方法来消除数字后的小数。

以下示例返回颜色的随机十六进制代码：

Open Compiler
<!DOCTYPE html>
<html>
   <title>Generating random Hex color</title>
<head>
   <div>
      <h3 id="demo">Mousemove here to get new random color</h3>
      <p id="color"></p>
   </div>
   <style>
      body {
         height: 100vh;
         padding: 1rem;
         display: grid;
         place-items: center;
         font-family: verdana;
      }
      div {
         background: white;
         padding: 1rem 1rem;
         text-align: center;
      }
      p {
         display: block;
         padding: 1px;
         font-size: 20px;
         font-weight: lighter;
         font-family: verdana;
      }
   </style>
</head>
<body>
   <script>
      function hex() {
         let RanHexCol = (Math.random()*16777215).toString(16);
         document.body.style.backgroundColor = '#' + RanHexCol.slice(0, 6);
         color.innerHTML = "#" + RanHexCol.slice(0, 6);
      }
      demo.addEventListener("mousemove", hex);
      hex();
   </script>
</body>
</html>

每当您将鼠标悬停在输出中的 h3 元素上时，我们都可以看到背景中的十六进制颜色会随机变化。

示例 3

在下面的示例中，我们将成为十六进制颜色代码一部分的所有字母和数字存储在一个变量中。循环将迭代 6 次，因为十六进制颜色代码由 6 个字母或数字组成，并将值添加到 '#'。现在，随机十六进制颜色代码已生成。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         height: 100vh;
         padding: 1rem;
         display: grid;
         place-items: center;
         font-family: verdana;
      }
      p {
         display: block;
         padding: 1px;
         font-size: 20px;
         font-weight: lighter;
         font-family: verdana;
      }
   </style>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      
      // storing all letter and digit combinations
      // for html color code
      var codes = "0123456789ABCDEF";
      
      // html color code starts with #
      var color = '#';
      
      // generating 6 times as HTML color code consist
      // of 6 letter or digits
      let i = 0;
      for (i; i < 6; i++)
      document.body.style.backgroundColor = color += codes[(Math.floor(Math.random() * 16))];
      document.getElementById("demo").innerHTML = color;
   </script>
</body>
</html>

在输出中，每次执行程序时，背景中的十六进制颜色都会随机更改。

更新于：2022年9月22日

2K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告