如何在 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

登入後複製