如何在 JavaScript 中生成随机十六进制颜色？ [简易指南]-js教程-PHP中文网

如何在 JavaScript 中生成随机十六进制颜色？ [简易指南]

PHPz

发布： 2024-08-01 11:05:03

原创

865 人浏览过

How to Generate Random HEX Color in JavaScript? [Easy Guide]

在本文中，我将指导您创建一个 JavaScript 函数，该函数生成由数字和字母混合组成的随机十六进制颜色代码。

此函数每次执行时都会生成随机的十六进制颜色：

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

登录后复制

1. 生成随机数

第一步，我们需要生成随机数，我们可以使用 JavaScript Math 对象和 Math random() 方法轻松实现。

如果您创建一个普通的随机方法，那么它会给您随机的十进制数字，请参阅下面的示例：

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

登录后复制

但是我们需要生成一个 0 到 16777215 之间的随机数，你可能会想为什么我需要 16777215 而不是“999999”或任何六位数字，我们需要使用这个八位数字，因为数字 16,777,215是六位十六进制颜色代码所能获得的最高值。

十六进制颜色代码使用六位数字，其中每个数字可以是从 0 到 9 或 A 到 F，为每个数字提供 16 种可能的选择。

这意味着您总共可以创建 16,777,216 种六位数字的不同颜色。最大的十六进制颜色代码是#FFFFFF，对应十进制的16,777,215。

因此，通过使用最大16,777,215的数字，您可以覆盖由六位十六进制代码表示的所有可能的颜色，包括包含字母字符的颜色。这可确保包含所有可能的颜色，无论是使用数字还是字母。

不要忘记将 Math.random() 方法包装在 Math.floor() 中，以确保获得整数并避免小数值。

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

登录后复制

2. 将数字转换为十六进制字符串

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

登录后复制

现在我们需要将数字转换为十六进制字符串，这可以使用 toString(16) 方法轻松完成。

只需对随机数使用 toString(16) 方法并将 16 作为参数传递，即可将其转换为十六进制字符串。

此方法确保生成的代码仅包含从 0 到 F 的数字和字母，不包含 F 以外的任何字符。

另请阅读：Next.js 中的 Google Analytics 跟踪代码 [设置指南]

3.添加padStart方法

我们的功能即将准备就绪。然而，存在一个潜在的问题：有时生成的十六进制颜色代码可能只有 5 个字符长，而不是 6 个。

如果函数返回 5 个字符的十六进制颜色代码，则该代码无效。为了解决这个问题并确保我们始终获得 6 字符的十六进制颜色代码，我们需要将 padStart 方法添加到代码中。

padStart(6, '0') 方法将通过在必要时添加前导零来确保颜色代码始终是 6 位代码。

例如，如果十六进制代码是 A9A9A 并且仅包含五个字符，则 padStart(6, '0') 方法将添加前导 0 以使其成为六位颜色代码，从而得到 0A9A9A。这可确保该函数始终返回格式正确的十六进制颜色代码，其中包含六个字符。

4. 返回生成的十六进制代码

最后一步是返回生成的随机十六进制颜色代码，以便可以在需要的地方轻松使用。

我想用模板字符串来包裹颜色代码并在开头添加#，这样我就不必每次使用此功能时都手动添加#。

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

登录后复制