在本文中，我將指導您創建一個 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

結論

當我第一次在 JavaScript 中創建隨機十六進位顏色產生器時，它只產生深色或暗色，因為它不包含任何字母字元。

對程式碼做了一些修改，終於達到了我想要的結果。我也希望這篇文章可以節省您創建類似功能的時間。

與正在尋找新專案或想要使用 JavaScript 建立東西的朋友分享這篇文章！

請同時閱讀：如何在不刪除 [3 種方法]