Rastgele Renk Oluşturucu – JavaScript

Bu öğretici, JavaScript'te rastgele renkler oluşturma prosedürünü gösterecektir.

JavaScript'te Rastgele Renk Nasıl Oluşturulur?

JavaScript'te rastgele renk oluşturmak için ' Math.random()*16 0 ile 16 arasında rasgele bir sayı oluşturan yöntem. Bunun nedeni, rasgele bir renk oluşturmak için kullanılabilecek bir rasgele onaltılık değer oluşturmanın bir yoludur.

Örnek 1: Rastgele Renk Oluştur
Bir HTML dosyasında, bir kap oluşturacağız ve düğmeye tıklandığında rastgele renkler oluşturan bir öğesi ekleyeceğiz:

< yayılma kimliği = 'renkKapsayıcı' >
< düğme kimliği = 'btn' > Rastgele Renk Oluşturmak İçin Tıklayın düğme >
açıklık >

Şimdi JavaScript dosyasına veya

---

• İlk olarak, bir fonksiyon tanımladık “ renk Oluşturucu() ” oluşturduğumuz yerde “ onaltılık haneler ” 0'dan 9'a ve A'dan F'ye onaltılık sayılar dizisi.
• Bir değişken oluşturun ' renk kodu ”.
• Ardından, “ için ” döngüsü, her yinelemede, “ yöntemleri Matematik ” Nesne, 0 ila 16 arasında rastgele bir sayı üretir.
• Ortaya çıkan indeks numarasını 'hexDigits' e iletin ve karşılık gelen indeks değerini 'colorCode' değişkeninde saklayın.
• 6 haneli bir kod oluşturmak için işlem 6 kez tekrar edecektir.
• Son olarak bu kodu “ # ” imzalayın ve işleve geri dönün.

Şimdi, “ addEventListener() Düğmenin tıklama olayındaki yöntem. Tanımlanan işlevi çağırın ' renk Oluşturucu() ” tüm gövdenin arka plan rengini değiştirmek için:

btn. addEventListener ( 'tıklamak' , ( ) => {
belge. vücut . stil . arka plan rengi = renk üreteci ( ) ;
} ) ;

Çıktı

Örnek 2: Kodla Rastgele Renk Oluşturun
Burada, karşılık gelen rastgele oluşturulmuş renk kodunu “ kullanarak renkle birlikte yazdıracağız. içHTML ' mülk:

btn. addEventListener ( 'tıklamak' , ( ) => {
belge. vücut . stil . arka plan rengi = renk üreteci ( ) ;
belge. getElementById ( 'renk kodu' ) . içHTML = renk üreteci ( ) ;
} ) ;

Çıktı, gövdenin ilgili arka plan rengiyle ilgili renk kodunu gösterir:

JavaScript'teki rasgele renk üreteci ile ilgili her şey buydu.

Çözüm

JavaScript'te rastgele renk oluşturmak için, ' kullanarak 6 basamaklı bir kod oluşturun. Matematik ' nesne yöntemleri ' için ' döngü. Her yinelemede, bir renk kodu basamağı oluşturulur ve bir değişkende artış sonrası. Bu renk kodu başında '#' ile döndürülür. Bu öğretici, JavaScript'te rastgele renkler oluşturma prosedürünü gösterdi.