Γεννήτρια τυχαίων χρωμάτων – JavaScript

Αυτό το σεμινάριο θα δείξει τη διαδικασία για τη δημιουργία τυχαίων χρωμάτων σε JavaScript.

Πώς να δημιουργήσετε τυχαίο χρώμα σε JavaScript;

Για τη δημιουργία τυχαίων χρωμάτων σε JavaScript, χρησιμοποιήστε το ' Math.random()*16 ” μέθοδος που δημιουργεί έναν τυχαίο αριθμό μεταξύ 0 και 16. Αυτό συμβαίνει επειδή είναι ένας τρόπος για να δημιουργηθεί μια τυχαία δεκαεξαδική τιμή, η οποία μπορεί να χρησιμοποιηθεί για τη δημιουργία ενός τυχαίου χρώματος.

Παράδειγμα 1: Δημιουργία τυχαίου χρώματος
Σε ένα αρχείο HTML, θα δημιουργήσουμε ένα κοντέινερ και θα προσθέσουμε ένα στοιχείο που δημιουργεί τα τυχαία χρώματα στο κλικ στο κουμπί:

< αναγνωριστικό εύρους = 'colorContainer' >
< αναγνωριστικό κουμπιού = 'btn' > Κάντε κλικ για να δημιουργήσετε τυχαίο χρώμα κουμπί >
σπιθαμή >

Τώρα, προσθέστε τον παρακάτω κώδικα σε αρχείο JavaScript ή ετικέτα

---

• Αρχικά, ορίσαμε μια συνάρτηση ' colorGenerator() 'όπου δημιουργούμε ένα' hexDigits Πίνακας δεκαεξαδικών αριθμών από το 0 έως το 9 και το Α έως το F.
• Δημιουργήστε μια μεταβλητή ' κωδικός χρώματος '.
• Στη συνέχεια, χρησιμοποιώντας το « Για ' βρόχο, σε κάθε επανάληψη, οι μέθοδοι του ' Μαθηματικά ” Το αντικείμενο δημιουργεί έναν τυχαίο αριθμό μεταξύ 0 και 16.
• Περάστε τον αριθμό ευρετηρίου που προκύπτει στα 'hexDigits' και αποθηκεύστε την αντίστοιχη τιμή ευρετηρίου στη μεταβλητή 'colorCode'.
• Η διαδικασία θα επαναληφθεί 6 φορές για τη δημιουργία ενός 6ψήφιου κωδικού.
• Τέλος, προσθέστε αυτόν τον κωδικό με το ' # ” υπογράψτε και επιστρέψτε στη λειτουργία.

Τώρα, επισυνάψτε το ' addEventListener() ' στο συμβάν κλικ του κουμπιού. Καλέστε την καθορισμένη συνάρτηση ' colorGenerator() ” για να αλλάξετε το χρώμα φόντου ολόκληρου του σώματος:

btn. addEventListener ( 'Κάντε κλικ' , ( ) => {
έγγραφο. σώμα . στυλ . χρώμα του φόντου = colorGenerator ( ) ;
} ) ;

Παραγωγή

Παράδειγμα 2: Δημιουργία τυχαίου χρώματος με κωδικό
Εδώ, θα εκτυπώσουμε τον αντίστοιχο χρωματικό κώδικα που δημιουργήθηκε τυχαία με το χρώμα χρησιμοποιώντας το ' innerHTML ” ιδιοκτησία:

btn. addEventListener ( 'Κάντε κλικ' , ( ) => {
έγγραφο. σώμα . στυλ . χρώμα του φόντου = colorGenerator ( ) ;
έγγραφο. getElementById ( 'κωδικός χρώματος' ) . innerHTML = colorGenerator ( ) ;
} ) ;

Η έξοδος δείχνει τον αντίστοιχο χρωματικό κώδικα με το σχετικό χρώμα φόντου του σώματος:

Αυτό αφορούσε τη γεννήτρια τυχαίων χρωμάτων στο JavaScript.

συμπέρασμα

Για τη δημιουργία τυχαίων χρωμάτων σε JavaScript, δημιουργήστε έναν 6ψήφιο κωδικό χρησιμοποιώντας ' Μαθηματικά ' μέθοδοι αντικειμένου στο ' Για ' βρόχος. Σε κάθε επανάληψη, δημιουργείται ένα ψηφίο κωδικού χρώματος και μετά την αύξηση σε μια μεταβλητή. Αυτός ο κωδικός χρώματος επιστρέφεται με '#' στην αρχή. Αυτό το σεμινάριο παρουσίασε τη διαδικασία για τη δημιουργία τυχαίων χρωμάτων σε JavaScript.