ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌లో యాదృచ్ఛిక రంగులను రూపొందించే విధానాన్ని ప్రదర్శిస్తుంది.
జావాస్క్రిప్ట్‌లో యాదృచ్ఛిక రంగును ఎలా రూపొందించాలి?
జావాస్క్రిప్ట్‌లో యాదృచ్ఛిక రంగును రూపొందించడానికి, 'ని ఉపయోగించండి Math.random()*16 ” పద్ధతి 0 మరియు 16 మధ్య యాదృచ్ఛిక సంఖ్యను సృష్టిస్తుంది. ఇది యాదృచ్ఛిక హెక్సాడెసిమల్ విలువను రూపొందించడానికి ఒక మార్గం, ఇది యాదృచ్ఛిక రంగును సృష్టించడానికి ఉపయోగించబడుతుంది.
ఉదాహరణ 1: యాదృచ్ఛిక రంగును రూపొందించండి
HTML ఫైల్‌లో, మేము ఒక కంటైనర్‌ను సృష్టిస్తాము మరియు బటన్ క్లిక్‌పై యాదృచ్ఛిక రంగులను రూపొందించే
< span id = 'రంగు కంటైనర్' >
< బటన్ id = 'btn' > యాదృచ్ఛిక రంగును రూపొందించడానికి క్లిక్ చేయండి బటన్ >
వ్యవధి >
ఇప్పుడు, జావాస్క్రిప్ట్ ఫైల్ లేదా <స్క్రిప్ట్> ట్యాగ్‌లో క్రింద ఇవ్వబడిన కోడ్‌ను జోడించండి:
ఫంక్షన్ రంగు జనరేటర్ ( ) {
ఉంది hexDigits = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 'ఎ' , 'బి' , 'సి' , 'డి' , 'మరియు' , 'ఎఫ్' ] ;
ఉంది రంగు కోడ్ = '' ;
కోసం ( ఉంది i = 0 ; i < 6 ; i ++ ) {
రంగు కోడ్ += hexDigits [ గణితం . అంతస్తు ( గణితం . యాదృచ్ఛికంగా ( ) * 16 ) ] ;
}
తిరిగి `#$ { రంగు కోడ్ } `
}
పై కోడ్ స్నిప్పెట్‌లో:
- మొదట, మేము ఒక ఫంక్షన్‌ను నిర్వచించాము ' కలర్ జెనరేటర్() 'అక్కడ మనం సృష్టిస్తాము' hexDigits ” హెక్సాడెసిమల్ సంఖ్యల శ్రేణి 0 నుండి 9 వరకు మరియు A నుండి F వరకు.
- వేరియబుల్ సృష్టించు ' రంగు కోడ్ ”.
- అప్పుడు, ఉపయోగించి ' కోసం 'లూప్, ప్రతి పునరావృతంలో, ' యొక్క పద్ధతులు గణితం ”ఆబ్జెక్ట్ 0 నుండి 16 మధ్య యాదృచ్ఛిక సంఖ్యను ఉత్పత్తి చేస్తుంది.
- ఫలిత సూచిక సంఖ్యను 'హెక్స్డిజిట్స్'కి పంపండి మరియు సంబంధిత సూచిక విలువను 'కలర్‌కోడ్' వేరియబుల్‌లో నిల్వ చేయండి.
- 6-అంకెల కోడ్‌ని సృష్టించడం కోసం ప్రక్రియ 6 సార్లు పునరావృతమవుతుంది.
- చివరగా, ''తో ఈ కోడ్‌ని జోడించండి # ” అని గుర్తు చేసి, ఫంక్షన్‌కి తిరిగి వెళ్లండి.
ఇప్పుడు, 'అటాచ్ చేయండి addEventListener() ” బటన్ యొక్క క్లిక్ ఈవెంట్‌పై పద్ధతి. నిర్వచించిన ఫంక్షన్‌కు కాల్ చేయండి' కలర్ జెనరేటర్() మొత్తం శరీరం యొక్క నేపథ్య రంగును మార్చడానికి:
btn addEventListener ( 'క్లిక్' , ( ) => {పత్రం. శరీరం . శైలి . నేపథ్య రంగు = రంగు జనరేటర్ ( ) ;
} ) ;
అవుట్‌పుట్
ఉదాహరణ 2: కోడ్‌తో యాదృచ్ఛిక రంగును రూపొందించండి
ఇక్కడ, మేము 'ని ఉపయోగించి రంగుతో సంబంధిత యాదృచ్ఛికంగా రూపొందించబడిన రంగు కోడ్‌ను ప్రింట్ చేస్తాము. అంతర్గత HTML 'ఆస్తి:
పత్రం. శరీరం . శైలి . నేపథ్య రంగు = రంగు జనరేటర్ ( ) ;
పత్రం. getElementById ( 'కలర్ కోడ్' ) . అంతర్గత HTML = రంగు జనరేటర్ ( ) ;
} ) ;
అవుట్‌పుట్ శరీరం యొక్క సంబంధిత నేపథ్య రంగుతో సంబంధిత రంగు కోడ్‌ను చూపుతుంది:
అదంతా జావాస్క్రిప్ట్‌లోని యాదృచ్ఛిక రంగు జనరేటర్ గురించి.
ముగింపు
జావాస్క్రిప్ట్‌లో యాదృచ్ఛిక రంగును రూపొందించడానికి, ''ని ఉపయోగించి 6-అంకెల కోడ్‌ను సృష్టించండి గణితం 'లో ఆబ్జెక్ట్ పద్ధతులు కోసం ” లూప్. ప్రతి పునరుక్తిలో, వేరియబుల్‌లో రంగు కోడ్ అంకె ఉత్పత్తి చేయబడుతుంది మరియు పెంపు తర్వాత. ఈ రంగు కోడ్ ప్రారంభంలో “#”తో అందించబడుతుంది. ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌లో యాదృచ్ఛిక రంగులను రూపొందించే విధానాన్ని ప్రదర్శించింది.