Овај водич ће показати процедуру за генерисање насумичних боја у ЈаваСцрипт-у.
Како генерисати насумичне боје у ЈаваСцрипт-у?
За генерисање насумичне боје у ЈаваСцрипт-у, користите „ Матх.рандом()*16 ” који креира насумични број између 0 и 16. То је зато што је то један од начина да се генерише насумична хексадецимална вредност, која се може користити за креирање насумичне боје.
Пример 1: Генеришите насумичне боје
У ХТМЛ датотеци ћемо креирати контејнер и додати елемент <буттон> који генерише насумичне боје при клику на дугме:
< спан ид = 'цолорЦонтаинер' >
< дугме ид = 'бтн' > Кликните да бисте генерисали случајну боју дугме >
спан >
Сада додајте доле наведени код у ЈаваСцрипт датотеку или ознаку <сцрипт>:
функција цолорГенератор ( ) {
био хекДигитс = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 'А' , 'Б' , 'Ц' , 'Д' , 'И' , 'Ф' ] ;
био код боје = '' ;
за ( био и = 0 ; и < 6 ; и ++ ) {
код боје += хекДигитс [ Матх . под ( Матх . насумично ( ) * 16 ) ] ;
}
повратак `#$ { код боје } `
}
У горњем исечку кода:
- Прво смо дефинисали функцију „ цолорГенератор() ” где креирамо „ хекДигитс ” низ хексадецималних бројева од 0 до 9 и А до Ф.
- Направите променљиву „ код боје ”.
- Затим, користећи „ за ” петља, на свакој итерацији, методе „ Матх ” Објект генерише насумични број између 0 и 16.
- Проследите резултујући број индекса у „хекДигитс“ и сачувајте одговарајућу вредност индекса у променљивој „цолорЦоде“.
- Процес ће се поновити 6 пута за креирање 6-цифреног кода.
- На крају, додајте овај код са „ # ” потпише и врати се на функцију.
Сада приложите „ аддЕвентЛистенер() ” на догађај клика на дугме. Позовите дефинисану функцију ' цолорГенератор() ” да промените боју позадине целог тела:
бтн. аддЕвентЛистенер ( 'кликни' , ( ) => {документ. тело . стил . боја позадине = цолорГенератор ( ) ;
} ) ;
Излаз
Пример 2: Генеришите насумичне боје помоћу кода
Овде ћемо одштампати одговарајући насумично генерисани код боје са бојом користећи „ иннерХТМЛ ' имовина:
документ. тело . стил . боја позадине = цолорГенератор ( ) ;
документ. гетЕлементБиИд ( 'код боје' ) . иннерХТМЛ = цолорГенератор ( ) ;
} ) ;
Излаз приказује одговарајући код боје са релевантном бојом позадине тела:
То је било све о генератору насумичних боја у ЈаваСцрипт-у.
Закључак
За генерисање насумичне боје у ЈаваСцрипт-у, направите шестоцифрени код користећи „ Матх ” објектне методе у „ за ” петља. На свакој итерацији, цифра кода боје се генерише и накнадно повећава у променљивој. Овај код боје се враћа са „#“ на почетку. Овај водич је показао процедуру за генерисање насумичних боја у ЈаваСцрипт-у.