Penjana Warna Rawak – JavaScript

Tutorial ini akan menunjukkan prosedur untuk menjana warna rawak dalam JavaScript.

Bagaimana untuk Menjana Warna Rawak dalam JavaScript?

Untuk menghasilkan warna rawak dalam JavaScript, gunakan ' Math.random()*16 ” kaedah yang mencipta nombor rawak antara 0 dan 16. Ini kerana ia adalah salah satu cara untuk menjana nilai perenambelasan rawak, yang boleh digunakan untuk mencipta warna rawak.

Contoh 1: Hasilkan Warna Rawak
Dalam fail HTML, kami akan mencipta bekas dan menambah elemen yang menjana warna rawak pada klik butang:

< id span = 'bekas warna' >
< id butang = 'btn' > Klik untuk Menjana Warna Rawak butang >
rentang >

Sekarang, tambahkan kod yang diberikan di bawah dalam fail JavaScript atau teg

---

• Pertama, kami telah menentukan fungsi ' colorGenerator() 'di mana kita mencipta' hexDigits ” tatasusunan nombor perenambelasan dari 0 hingga 9 dan A hingga F.
• Buat pembolehubah ' kod warna ”.
• Kemudian, menggunakan ' untuk gelung ', pada setiap lelaran, kaedah ' Matematik ” Objek menjana nombor rawak antara 0 hingga 16.
• Hantar nombor indeks yang terhasil kepada 'hexDigits' dan simpan nilai indeks yang sepadan dalam pembolehubah 'ColourCode'.
• Proses ini akan berulang 6 kali untuk mencipta kod 6 digit.
• Akhir sekali, tambah kod ini dengan ' # ” tandatangan dan kembali ke fungsi.

Sekarang, lampirkan ' addEventListener() ” kaedah pada acara klik butang. Panggil fungsi yang ditentukan ' colorGenerator() ” untuk menukar warna latar belakang seluruh badan:

btn. addEventListener ( 'klik' , ( ) => {
dokumen. badan . gaya . warna latar belakang = colorGenerator ( ) ;
} ) ;

Pengeluaran

Contoh 2: Hasilkan Warna Rawak Dengan Kod
Di sini, kami akan mencetak kod warna yang dijana secara rawak yang sepadan dengan warna menggunakan ' innerHTML ” harta:

btn. addEventListener ( 'klik' , ( ) => {
dokumen. badan . gaya . warna latar belakang = colorGenerator ( ) ;
dokumen. getElementById ( 'kod warna' ) . innerHTML = colorGenerator ( ) ;
} ) ;

Output menunjukkan kod warna yang sepadan dengan warna latar belakang badan yang berkaitan:

Itu semua tentang penjana warna rawak dalam JavaScript.

Kesimpulan

Untuk menjana warna rawak dalam JavaScript, buat kod 6 digit menggunakan “ Matematik ' kaedah objek dalam ' untuk ” gelung. Pada setiap lelaran, digit kod warna dijana dan selepas kenaikan dalam pembolehubah. Kod warna ini dikembalikan dengan '#' pada mulanya. Tutorial ini menunjukkan prosedur untuk menghasilkan warna rawak dalam JavaScript.