Generator Warna Acak – JavaScript

Tutorial ini akan menunjukkan prosedur untuk menghasilkan warna acak dalam JavaScript.

Bagaimana Cara Menghasilkan Warna Acak dalam JavaScript?

Untuk menghasilkan warna acak dalam JavaScript, gunakan “ Math.random()*16 ” metode yang membuat angka acak antara 0 dan 16. Ini karena ini adalah salah satu cara untuk menghasilkan nilai heksadesimal acak, yang dapat digunakan untuk membuat warna acak.

Contoh 1: Hasilkan Warna Acak
Dalam file HTML, kami akan membuat wadah dan menambahkan elemen yang menghasilkan warna acak pada klik tombol:

< rentang id = 'kontainer warna' >
< tombol id = 'btn' > Klik untuk Menghasilkan Warna Acak tombol >
menjangkau >

Sekarang, tambahkan kode yang diberikan di bawah ini dalam file JavaScript atau tag

---

• Pertama, kami telah mendefinisikan fungsi ' colorGenerator() ” tempat kami membuat “ hexDigits ” deretan angka heksadesimal dari 0 hingga 9 dan A hingga F.
• Buat variabel “ Kode warna ”.
• Kemudian, dengan menggunakan “ untuk ”, pada setiap iterasi, metode dari “ Matematika ” Objek menghasilkan angka acak antara 0 hingga 16.
• Berikan nomor indeks yang dihasilkan ke 'hexDigits' dan simpan nilai indeks yang sesuai dalam variabel 'colorCode'.
• Proses akan berulang 6 kali untuk membuat kode 6 digit.
• Terakhir, tambahkan kode ini dengan “ # ” tanda tangani dan kembali ke fungsi.

Sekarang, lampirkan “ addEventListener() ” pada acara klik tombol. Panggil fungsi yang ditentukan “ colorGenerator() ” untuk mengubah warna latar belakang seluruh tubuh:

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

Keluaran

Contoh 2: Hasilkan Warna Acak Dengan Kode
Di sini, kami akan mencetak kode warna yang dihasilkan secara acak dengan warna menggunakan “ innerHTML ' Properti:

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

Keluaran menunjukkan kode warna yang sesuai dengan warna latar belakang tubuh yang relevan:

Itu semua tentang generator warna acak di JavaScript.

Kesimpulan

Untuk menghasilkan warna acak dalam JavaScript, buat kode 6 digit menggunakan “ Matematika ” metode objek dalam “ untuk ' lingkaran. Pada setiap iterasi, digit kode warna dihasilkan dan ditambahkan setelah variabel. Kode warna ini dikembalikan dengan '#' di awal. Tutorial ini mendemonstrasikan prosedur untuk menghasilkan warna acak dalam JavaScript.