इस लेख में, मैं आपको एक जावास्क्रिप्ट फ़ंक्शन बनाने में मार्गदर्शन करूंगा जो संख्याओं और अक्षरों के मिश्रण से बना एक यादृच्छिक हेक्स रंग कोड उत्पन्न करता है।

यह फ़ंक्शन हर बार निष्पादित होने पर एक यादृच्छिक हेक्स रंग उत्पन्न करता है:

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. यादृच्छिक संख्याएँ उत्पन्न करना

पहले चरण में हमें यादृच्छिक संख्याएं उत्पन्न करने की आवश्यकता है और हम जावास्क्रिप्ट गणित ऑब्जेक्ट और गणित यादृच्छिक() विधि का उपयोग करके आसानी से ऐसा कर सकते हैं।

यदि आप एक सामान्य यादृच्छिक विधि बनाते हैं तो यह आपको यादृच्छिक दशमलव संख्याएं देगी, नीचे उदाहरण देखें:

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

लेकिन हमें 0 और 16777215 के बीच एक यादृच्छिक संख्या उत्पन्न करने की आवश्यकता है, आप सोच रहे होंगे कि मुझे "999999" या किसी छह-अंकीय संख्या के बजाय 16777215 की आवश्यकता क्यों है, हमें इस आठ-अंकीय संख्या का उपयोग करने की आवश्यकता है क्योंकि संख्या 16,777,215 यह छह अंकों वाले हेक्स रंग कोड के साथ प्राप्त होने वाला उच्चतम मूल्य है।

हेक्स रंग कोड छह अंकों का उपयोग करते हैं, जहां प्रत्येक अंक 0 से 9 या ए से एफ तक हो सकता है, जो प्रत्येक अंक के लिए 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 से एफ तक केवल अंक और अक्षर शामिल हों, एफ से आगे कोई वर्ण न हो।

यह भी पढ़ें: Next.js में Google Analytics ट्रैकिंग कोड [सेट अप गाइड]

3. पैडस्टार्ट विधि जोड़ें

हमारा समारोह लगभग तैयार है। हालाँकि, एक संभावित समस्या है: कभी-कभी उत्पन्न हेक्स रंग कोड 6 के बजाय केवल 5 अक्षर लंबा हो सकता है।

यदि फ़ंक्शन 5-वर्ण का हेक्स रंग कोड लौटाता है, तो यह मान्य नहीं होगा। इसे ठीक करने और यह सुनिश्चित करने के लिए कि हमें हमेशा 6-वर्ण का हेक्स रंग कोड मिले, हमें कोड में पैडस्टार्ट विधि जोड़ने की आवश्यकता है।

पैडस्टार्ट(6, '0') विधि यदि आवश्यक हो तो अग्रणी शून्य जोड़कर यह सुनिश्चित करेगी कि रंग कोड हमेशा 6 अंकों का कोड हो।

उदाहरण के लिए, यदि हेक्स कोड A9A9A है और इसमें केवल पांच अक्षर हैं, तो पैडस्टार्ट (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

निष्कर्ष

जब मैंने पहली बार जावास्क्रिप्ट में एक यादृच्छिक हेक्स रंग जनरेटर बनाया, तो यह केवल गहरे या सुस्त रंग उत्पन्न करता था क्योंकि इसमें कोई वर्णमाला वर्ण शामिल नहीं था।

कोड में कुछ बदलाव करने के बाद, मैंने अंततः वांछित परिणाम प्राप्त किया। मुझे यह भी उम्मीद है कि इस पोस्ट ने समान फ़ंक्शन बनाने में आपका समय बचाया है।

इस पोस्ट को अपने उन दोस्तों के साथ साझा करें जो किसी नए प्रोजेक्ट की तलाश में हैं या जावास्क्रिप्ट का उपयोग करके कुछ बनाना चाहते हैं!

यह भी पढ़ें: HTML कोड को बिना डिलीट किए कैसे डिसेबल करें [3 तरीके]