जावास्क्रिप्ट में रैंडम कलर जेनरेटर

परिचय

जावास्क्रिप्ट में रैंडम कलर जेनरेट करने के लिए, हम हेक्साडेसिमल कैरेक्टर्स (0-9, A-F) से 6-कैरेक्टर स्ट्रिंग बनाते हैं और इसे # से प्रीफिक्स करते हैं। यह element.style.backgroundColor या jQuery के .css() के माध्यम से एलिमेंट की पृष्ठभूमि पर लागू किया जा सकता है।

उदाहरण

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>रैंडम कलर</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="chooseColor" style="width:100px;height:100px;background-color:#FF0"></div> <button onclick="pickRandomColor()">रैंडम कलर पाने के लिए बटन पर क्लिक करें</button> </body> <script> // getColorCode() हर बार एक कोड देगा function getColorCode() { const hexChars = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += hexChars[Math.floor(Math.random() * 16)]; } return color; } // बटन क्लिक पर फ़ंक्शन कॉल function pickRandomColor() { $('#chooseColor').css('background-color', getColorCode()); // या वैनिला JS: // document.getElementById('chooseColor').style.backgroundColor = getColorCode(); } </script> </html>

आउटपुट

डिफ़ॉल्ट रूप से, यह पीला रंग देगा, और जब आप बटन पर क्लिक करेंगे, तो रैंडम रंग प्रदर्शित होगा।

रैंडम कलर पाने के लिए बटन पर क्लिक करें बटन पर क्लिक करने के बाद सैंपल आउटपुट का स्नैपशॉट:

चलाने के निर्देश

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें और फ़ाइल पर राइट-क्लिक करके VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।

आधुनिक दृष्टिकोण (ES6+)

// छोटा संस्करण
const randomColor = () => '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');

// या CSS-in-JS दृष्टिकोण
element.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%);`;