מחולל צבעים אקראי - JavaScript

מדריך זה ידגים את ההליך ליצירת צבעים אקראיים ב-JavaScript.

כיצד ליצור צבע אקראי ב-JavaScript?

ליצירת צבע אקראי ב-JavaScript, השתמש ב-' Math.random()*16 ” שיטה שיוצרת מספר אקראי בין 0 ל-16. הסיבה לכך היא שזו דרך אחת ליצור ערך הקסדצימלי אקראי, שניתן להשתמש בו ליצירת צבע אקראי.

דוגמה 1: צור צבע אקראי
בקובץ HTML, ניצור קונטיינר ונוסיף אלמנט שיוצר את הצבעים האקראיים בלחיצת הכפתור:

< מזהה span = 'מיכל צבע' >
< מזהה כפתור = 'btn' > לחץ כדי ליצור צבע אקראי לַחְצָן >
לְהַקִיף >

כעת, הוסף את הקוד הנתון להלן בקובץ JavaScript או בתג

---

• ראשית, הגדרנו פונקציה ' colorGenerator() ' שבו אנו יוצרים ' hexDigits ' מערך של מספרים הקסדצימליים מ-0 עד 9 ומ-A עד F.
• צור משתנה ' קוד צבע '.
• לאחר מכן, באמצעות ' ל ' לולאה, בכל איטרציה, השיטות של ' מתמטיקה אובייקט יוצר מספר אקראי בין 0 ל-16.
• העבר את מספר האינדקס שנוצר ל-'hexDigits' ואחסן את ערך האינדקס המתאים במשתנה 'colorCode'.
• התהליך יחזור 6 פעמים ליצירת קוד בן 6 ספרות.
• לבסוף, הוסף את הקוד הזה עם ' # ' לחתום ולחזור לפונקציה.

כעת, צרף את ' addEventListener() שיטת ' באירוע הלחיצה של הכפתור. קרא לפונקציה המוגדרת ' colorGenerator() כדי לשנות את צבע הרקע של הגוף כולו:

btn. addEventListener ( 'נְקִישָׁה' , ( ) => {
מסמך. גוּף . סִגְנוֹן . צבע רקע = מחולל צבע ( ) ;
} ) ;

תְפוּקָה

דוגמה 2: צור צבע אקראי עם קוד
כאן, נדפיס את קוד הצבע המתאים שנוצר באקראי עם הצבע באמצעות ' innerHTML ' תכונה:

btn. addEventListener ( 'נְקִישָׁה' , ( ) => {
מסמך. גוּף . סִגְנוֹן . צבע רקע = מחולל צבע ( ) ;
מסמך. getElementById ( 'קוד צבע' ) . innerHTML = מחולל צבע ( ) ;
} ) ;

הפלט מציג קוד צבע מתאים עם צבע הרקע הרלוונטי של הגוף:

זה היה הכל על מחולל הצבעים האקראי ב-JavaScript.

סיכום

ליצירת צבע אקראי ב-JavaScript, צור קוד בן 6 ספרות באמצעות ' מתמטיקה ' שיטות אובייקט ב' ל 'לולאה. בכל איטרציה נוצרת ספרת קוד צבע ולאחר הגדלה של משתנה. קוד צבע זה מוחזר עם '#' בהתחלה. מדריך זה הדגים את ההליך ליצירת צבעים אקראיים ב-JavaScript.