مولد لون عشوائي - جافا سكريبت

سيوضح هذا البرنامج التعليمي الإجراء الخاص بإنشاء ألوان عشوائية في JavaScript.

كيفية إنشاء لون عشوائي في JavaScript؟

لإنشاء لون عشوائي في JavaScript ، استخدم ' Math.random () * 16 ”التي تُنشئ رقمًا عشوائيًا بين 0 و 16. وذلك لأنها إحدى طرق إنشاء قيمة سداسية عشرية عشوائية ، والتي يمكن استخدامها لإنشاء لون عشوائي.

مثال 1: إنشاء لون عشوائي
في ملف HTML ، سننشئ حاوية ونضيف عنصر الذي يولد الألوان العشوائية عند النقر فوق الزر:

< معرف تمتد = 'colorContainer' >
< معرف الزر = 'btn' > انقر لتوليد لون عشوائي زر >
فترة >

الآن ، أضف الكود الوارد أدناه في ملف JavaScript أو علامة

---

• أولاً ، حددنا وظيفة ' colorGenerator () 'حيث نقوم بإنشاء' أرقام سداسية 'مصفوفة من الأعداد السداسية العشرية من 0 إلى 9 ومن A إلى F.
• إنشاء متغير ' رمز اللون '.
• ثم ، باستخدام ' ل '، في كل تكرار ، طرق' رياضيات يقوم الكائن بإنشاء رقم عشوائي بين 0 إلى 16.
• مرر رقم الفهرس الناتج إلى 'hexDigits' وقم بتخزين قيمة الفهرس المقابلة في متغير 'colorCode'.
• ستتكرر العملية 6 مرات لإنشاء رمز مكون من 6 أرقام.
• أخيرًا ، أضف هذا الرمز مع ' # 'التوقيع والعودة إلى الوظيفة.

الآن ، أرفق ' addEventListener () 'في حدث النقر على الزر. استدعاء الوظيفة المحددة ' colorGenerator () 'لتغيير لون خلفية الجسم بالكامل:

BTN. addEventListener ( 'انقر' و ( ) => {
وثيقة. جسم . أسلوب . لون الخلفية = مولد اللون ( ) ؛
} ) ؛

انتاج |

مثال 2: إنشاء لون عشوائي باستخدام رمز
هنا ، سنطبع رمز اللون المقابل الذي تم إنشاؤه عشوائيًا مع اللون باستخدام ' داخلي HTML ' ملكية:

BTN. addEventListener ( 'انقر' و ( ) => {
وثيقة. جسم . أسلوب . لون الخلفية = مولد اللون ( ) ؛
وثيقة. getElementById ( 'رمز اللون' ) . داخلي HTML = مولد اللون ( ) ؛
} ) ؛

يُظهر الإخراج رمز اللون المقابل مع لون الخلفية المناسب للجسم:

كان هذا كل شيء عن مولد الألوان العشوائية في JavaScript.

خاتمة

لإنشاء لون عشوائي في JavaScript ، أنشئ رمزًا مكونًا من 6 أرقام باستخدام ' رياضيات 'أساليب الكائن في' ل ' حلقة. في كل تكرار ، يتم إنشاء رقم رمز اللون والزيادة اللاحقة في متغير. يتم إرجاع رمز اللون هذا مع '#' في البداية. يوضح هذا البرنامج التعليمي الإجراء الخاص بإنشاء ألوان عشوائية في JavaScript.