यादृच्छिक रंग जेनरेटर - जावास्क्रिप्ट

Yadrcchika Ranga Jenaretara Javaskripta



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

यह ट्यूटोरियल जावास्क्रिप्ट में यादृच्छिक रंग उत्पन्न करने की प्रक्रिया को प्रदर्शित करेगा।

जावास्क्रिप्ट में यादृच्छिक रंग कैसे उत्पन्न करें?

जावास्क्रिप्ट में यादृच्छिक रंग उत्पन्न करने के लिए, 'का उपयोग करें' मठ.यादृच्छिक()*16 ” विधि जो 0 और 16 के बीच एक यादृच्छिक संख्या बनाती है। ऐसा इसलिए है क्योंकि यह यादृच्छिक हेक्साडेसिमल मान उत्पन्न करने का एक तरीका है, जिसका उपयोग यादृच्छिक रंग बनाने के लिए किया जा सकता है।







उदाहरण 1: यादृच्छिक रंग उत्पन्न करें
एक HTML फ़ाइल में, हम एक कंटेनर बनाएंगे और एक <बटन> तत्व जोड़ेंगे जो बटन क्लिक पर यादृच्छिक रंग उत्पन्न करता है:



< स्पैन आईडी = 'कलरकंटेनर' >
< बटन आईडी = 'बीटीएन' > यादृच्छिक रंग उत्पन्न करने के लिए क्लिक करें बटन >
अवधि >

अब, जावास्क्रिप्ट फ़ाइल या


  • सबसे पहले, हमने एक फ़ंक्शन परिभाषित किया है ' कलर जेनरेटर () 'जहां हम एक' बनाते हैं hexDigits 'हेक्साडेसिमल संख्याओं की सरणी 0 से 9 और ए से एफ तक।
  • एक चर बनाएँ ' रंग कोड ”।
  • फिर, 'का उपयोग करना के लिए 'पाश, हर पुनरावृत्ति पर, के तरीके' गणित 'ऑब्जेक्ट 0 से 16 के बीच एक यादृच्छिक संख्या उत्पन्न करता है।
  • परिणामी इंडेक्स नंबर को 'हेक्सडिजिट्स' में पास करें और संबंधित इंडेक्स वैल्यू को 'कलरकोड' वेरिएबल में स्टोर करें।
  • 6 अंकों का कोड बनाने के लिए प्रक्रिया को 6 बार दोहराया जाएगा।
  • अंत में, इस कोड को 'के साथ जोड़ें' # ”हस्ताक्षर करें और समारोह में लौटें।

अब, संलग्न करें ' ऐडइवेंट लिस्टनर () बटन के क्लिक इवेंट पर 'विधि। परिभाषित फ़ंक्शन को कॉल करें ' कलर जेनरेटर () ' पूरे शरीर की पृष्ठभूमि का रंग बदलने के लिए:

btn। addEventListener ( 'क्लिक' , ( ) => {
दस्तावेज़। शरीर . शैली . पृष्ठभूमि का रंग = colorGenerator ( ) ;
} ) ;

उत्पादन



उदाहरण 2: कोड के साथ यादृच्छिक रंग उत्पन्न करें
यहां, हम 'का उपयोग करके रंग के साथ यादृच्छिक रूप से उत्पन्न रंग कोड को प्रिंट करेंगे' innerHTML ' संपत्ति:

btn। addEventListener ( 'क्लिक' , ( ) => {
दस्तावेज़। शरीर . शैली . पृष्ठभूमि का रंग = colorGenerator ( ) ;
दस्तावेज़। getElementById ( 'रंग कोड' ) . innerHTML = colorGenerator ( ) ;
} ) ;

आउटपुट शरीर के प्रासंगिक पृष्ठभूमि रंग के साथ संबंधित रंग कोड दिखाता है:

यह सब जावास्क्रिप्ट में यादृच्छिक रंग जनरेटर के बारे में था।

निष्कर्ष

जावास्क्रिप्ट में यादृच्छिक रंग उत्पन्न करने के लिए, 'का उपयोग करके 6 अंकों का कोड बनाएं गणित ' वस्तु विधियों में ' के लिए ' कुंडली। प्रत्येक पुनरावृत्ति पर, एक रंग कोड अंक उत्पन्न होता है और एक चर में वृद्धि के बाद होता है। यह रंग कोड शुरुआत में '#' के साथ दिया जाता है। इस ट्यूटोरियल ने जावास्क्रिप्ट में यादृच्छिक रंग उत्पन्न करने की प्रक्रिया का प्रदर्शन किया।