في هذه المقالة، سأرشدك خلال إنشاء وظيفة JavaScript تقوم بإنشاء رمز لوني سداسي عشري عشوائي يتكون من مزيج من الأرقام والحروف الهجائية.

تقوم هذه الوظيفة بإنشاء لون سداسي عشري عشوائي في كل مرة يتم تنفيذها:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. توليد أرقام عشوائية

في الخطوة الأولى نحتاج إلى إنشاء أرقام عشوائية ويمكننا القيام بذلك بسهولة باستخدام كائن JavaScript Math وطريقة Math Random().

إذا قمت بإنشاء طريقة عشوائية عادية فسوف تعطيك أرقام عشرية عشوائية انظر المثال أدناه:

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

لكننا بحاجة إلى توليد رقم عشوائي بين 0 و16777215، ربما تتساءل لماذا أحتاج إلى 16777215 بدلاً من "999999" أو أي رقم مكون من ستة أرقام جيدًا نحتاج إلى استخدام هذا الرقم المكون من ثمانية أرقام لأن الرقم 16,777,215 هي أعلى قيمة يمكنك الحصول عليها باستخدام رمز لوني سداسي عشري مكون من ستة أرقام.

تستخدم رموز الألوان السداسية ستة أرقام، حيث يمكن أن يكون كل رقم من 0 إلى 9 أو من A إلى F، مما يوفر 16 خيارًا ممكنًا لكل رقم.

هذا يعني أنه يمكنك إنشاء إجمالي 16,777,216 ألوان مختلفة بستة أرقام. أكبر رمز لون سداسي عشري هو #FFFFFF، والذي يتوافق مع 16,777,215 بالنظام العشري.

لذلك، باستخدام رقم يصل إلى 16,777,215، يمكنك تغطية جميع الألوان الممكنة الممثلة برمز سداسي عشري مكون من ستة أرقام، بما في ذلك تلك التي تحتوي على أحرف أبجدية. وهذا يضمن تضمين كل لون ممكن، سواء كان يستخدم أرقامًا أو أحرفًا.

لا تنسَ تغليف التابع Math.random() داخل Math.floor() لضمان حصولك على أرقام صحيحة وتجنب القيم العشرية.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. تحويل الرقم إلى سلسلة ست عشرية

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

الآن نحن بحاجة إلى تحويل الرقم إلى سلسلة ست عشرية، وهو ما يمكن القيام به بسهولة باستخدام طريقة toString(16).

ما عليك سوى استخدام طريقة toString(16) على الرقم العشوائي وتمرير 16 كوسيطة لتحويله إلى سلسلة سداسية عشرية.

تضمن هذه الطريقة أن الكود الناتج يتضمن فقط أرقامًا وأحرفًا من 0 إلى F، دون أي أحرف تتجاوز F.

اقرأ أيضًا : كود تتبع Google Analytics في Next.js [دليل الإعداد]

3. أضف طريقة PadStart

وظيفتنا جاهزة تقريبًا. ومع ذلك، هناك مشكلة محتملة: في بعض الأحيان قد يتكون رمز اللون السداسي الذي تم إنشاؤه من 5 أحرف فقط بدلاً من 6.

إذا قامت الدالة بإرجاع رمز لون سداسي عشري مكون من 5 أحرف، فلن يكون صالحًا. لإصلاح ذلك والتأكد من أننا نحصل دائمًا على رمز لوني سداسي عشري مكون من 6 أحرف، نحتاج إلى إضافة طريقة PadStart إلى الكود.

سيضمن الأسلوب PadStart(6, '0') أن رمز اللون يتكون دائمًا من 6 أرقام عن طريق إضافة الأصفار البادئة إذا لزم الأمر.

على سبيل المثال، إذا كان الرمز السداسي هو A9A9A ويحتوي على خمسة أحرف فقط، فإن طريقة PadStart(6, '0') ستضيف 0 بادئة لجعله رمزًا ملونًا مكونًا من ستة أرقام، مما يؤدي إلى 0A9A9A. وهذا يضمن أن تقوم الوظيفة دائمًا بإرجاع رمز لون سداسي عشري منسق بشكل صحيح يتكون من ستة أحرف بالضبط.

4. قم بإرجاع الرمز السداسي الذي تم إنشاؤه

الخطوة الأخيرة هي إعادة رمز اللون السداسي العشوائي الذي تم إنشاؤه بحيث يمكن استخدامه بسهولة عند الحاجة.

أريد استخدام سلسلة قالب لتغليف رمز اللون وإضافة # في البداية، لذلك لا يتعين علي إضافة # يدويًا في كل مرة أستخدم فيها هذه الوظيفة.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

خاتمة

عندما قمت لأول مرة بإنشاء مولد ألوان سداسي عشري عشوائي في JavaScript، لم ينتج سوى ألوان داكنة أو باهتة لأنه لم يتضمن أي أحرف أبجدية.

بعد إجراء بعض التغييرات على الكود، وصلت أخيرًا إلى النتيجة المرجوة. آمل أيضًا أن يكون هذا المنشور قد وفر لك الوقت في إنشاء وظيفة مماثلة.

شارك هذا المنشور مع أصدقائك الذين يبحثون عن مشروع جديد أو يرغبون في إنشاء شيء ما باستخدام JavaScript!

اقرأ أيضًا: كيفية تعطيل كود HTML دون حذف [3 طرق]