تم تعطيل الجافا سكربت. للحصول على تجربة أفضل، الرجاء تمكين الجافا سكربت في المتصفح الخاص بك قبل المتابعة.

انشاء مولد الأوان RainBow Color

كود سكريبت انشاء مولد الأوان RainBow Color

منتدى السكربت Nulled سكريبت IPTV بث مباشر إستيراد الافلام والمسلسلات بإستخدام TMDB API انشاء مولد الأوان RainBow Color استخراج ترجمة فيديو يوتيوب YouTube Data API

كيفية إنشاء أداة RAINBOW لتلوين النص باستخدام CSS

ماهي أداة RAINBOW text Generator

هذا الكود يتضمن HTML وCSS وJavaScript لإنشاء أداة تقوم بتلوين النص بناءً على عدد الألوان قوس قزح المحدد من قبل المستخدم. إليك نظرة عامة على خصائص كل جزء:

كيفية إنشاء أداة RAINBOW

خطوات استخدام HTML

- يحتوي على عنصر `textarea` لإدخال النص.

- يتضمن حقل إدخال من نوع `number` لتحديد عدد ألوان قوس قزح.

- زر لتوليد النص الملون.

- منطقة عرض `textarea` لعرض النص الملون المنسوب للألوان.

- منطقة `div` لعرض المعاينة بنفس النص الملون.

خطوات إستخدام CSS

- `.gen`: تنسيق زر التوليد، يشمل خلفية زرقاء ونص أبيض.
- `.thetext`: تنسيق الحاوية التي تحتوي على جميع العناصر، مع تحديد أبعادها.

- `.textIn`:

تنسيق منطقة إدخال النص مع شريط تمرير ومربع ظل.

- `.numText`:

تنسيق نص الموجه المستخدم لتحديد عدد الألوان.

- `.numIn`:

تنسيق حقل إدخال عدد الألوان، مع ألوان مميزة.

- `.widget`:

تحديد تنسيق محاذاة النص في مركز العنصر.

خطوات إستخدام JavaScript

- الدالة `hslToHex(h, s, l)`:

تحول ألوان HSL إلى تنسيق HEX.

- الدالة `generate()`:

تقوم بتوليد النص الملون بناءً على عدد الألوان المحدد. يتم حساب ألوان قوس قزح باستخدام قيم HSL، ثم يتم تحويلها إلى HEX وتطبيقها على النص.

- الحدث `onclick` على الزر:

يستدعي دالة `generate()` عند النقر على الزر لتوليد النص الملون ونسخه إلى الحافظة.

ما هي ظيفة الكود Rainbow

عند النقر على زر "Generate":
1. يتم قراءة النص المدخل وعدد الألوان المحدد.
2. يتم حساب تغيير اللون بناءً على طول النص وعدد الألوان.
3. يتم تلوين كل حرف في النص بلون مختلف.
4. يتم عرض النص الملون في `textarea` وعرض المعاينة.
5. يتم نسخ النص الملون إلى الحافظة تلقائيًا.

يمكنك استخدام هذا الكود لإنشاء أداة مرحة لتلوين النصوص بشكل قوس قزح بناءً على مدخلات المستخدم.

مثال لمولد الحروف rainbow

Rainbow Text Generator

Number Of Rainbows:

سكريبت html css java Rainbow

/* تنسيق الحاوية */
        .containero {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 600px;
            width: 100%;
        }

/* تنسيق منطقة إدخال النص */
        .text-input {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
            resize: none;
            overflow: auto;
            margin-bottom: 20px;
        }

/* تنسيق عناصر التحكم */
        .controls {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

/* تنسيق نص عدد ألوان قوس قزح */
        .num-text {
            margin-right: 10px;
            font-weight: bold;
            color: #333;
        }

/* تنسيق حقل إدخال عدد الألوان */
        .num-input {
            width: 60px;
            padding: 5px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-weight: bold;
            color: #333;
        }

/* تنسيق زر التوليد */
        .generate-btn {
            background: #4454FF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

.generate-btn:hover {
            background: #3349FF;
        }

/* تنسيق منطقة الإخراج */
        .output {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: auto;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

/* تنسيق منطقة المعاينة */
        .preview {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-height: 50px;
            overflow: auto;
        }
    </style>

<div>

نشرت

1/1/25
مشاهدات الصفحة

10

فيسبوك X (Twitter) Reddit Pinterest Tumblr WhatsApp البريد الإلكتروني الرابط

محتوى مميز

الموضوع 'البرنامج الاكثر استخداما فى تصميم اللوجو والشعارات Summitsoft Logo Design Studio Pro Vector Edition 2.0.4.0'
- xenfamily
- منذ 3 دقيقة
الردود: 0
الموضوع 'عينة جامدة لتجربتها بالتشغيل بتاريخ اليوم 11-1-2025'
- xenfamily
- منذ 3 دقيقة
الردود: 0
الموضوع 'CorelDRAW Graphics Suite X7 17.5.0.907 Special Edition (x86/x64).'
- xenfamily
- منذ 49 دقيقة
الردود: 0
الموضوع 'مساعدة حل مشكلة usb firmware'
- xenfamily
- منذ 49 دقيقة
الردود: 0
الموضوع '‏•.ღ.•خربشات قلم متمرد ..."مدونتي"...•.ღ.•'
- fouad
- الأمس في 23:52
الردود: 0

أحدث المواضيع

البرنامج الاكثر استخداما فى تصميم اللوجو والشعارات Summitsoft Logo Design Studio Pro Vector Edition 2.0.4.0
- بُدأت بواسطة xenfamily
- منذ 3 دقيقة
- الردود: 0
منتدى السكربت Nulled
عينة جامدة لتجربتها بالتشغيل بتاريخ اليوم 11-1-2025
- بُدأت بواسطة xenfamily
- منذ 3 دقيقة
- الردود: 0
منتدى السكربت Nulled
CorelDRAW Graphics Suite X7 17.5.0.907 Special Edition (x86/x64).
- بُدأت بواسطة xenfamily
- منذ 49 دقيقة
- الردود: 0
منتدى السكربت Nulled
مساعدة حل مشكلة usb firmware
- بُدأت بواسطة xenfamily
- منذ 49 دقيقة
- الردود: 0
منتدى السكربت Nulled
‏•.ღ.•خربشات قلم متمرد ..."مدونتي"...•.ღ.•
- بُدأت بواسطة fouad
- الأمس في 23:52
- الردود: 0
منتدى السكربت Nulled

إحصائيات المنتدى

المواضيع: 5,528

المشاركات: 5,559

الأعضاء: 4,873

آخر عضو مسجل: freexen

محتوى رائج

الموضوع 'أكبر مكتبة لجميع دامبات الأجهزة الرقمية الفضائية'
- gpldroid
- الأحد في 22:00
الردود: 7
الموضوع 'صفحة خاصة لملفات القنوات لاجهزة السات فيندر SATFINDER'
- gpldroid
- 4/1/25
الردود: 7
الموضوع 'تجميعية اكواد داونلودر Apk لاهم التطبيقات DOWNLOADER APK'
- gpldroid
- الأربعاء في 12:15
الردود: 3
الموضوع 'طلب ملف تعريب زين فورو v2.1.11'
- عماد الدين
- الأربعاء في 22:42
الردود: 1
الموضوع 'اكواد MAC STALKER PORTAL متجدد'
- gpldroid
- الثلاثاء في 08:18
الردود: 1

آخر المشاركات

شراقي: هناك تعنت إثيوبي كبير في التوصل لاتفاق حول تشغيل "سد النهضة"
- الأحدث: عماد الدين الفلسطيني
- منذ 3 دقيقة
منتدى الأخبار
سيناتور روسي يعلق على تصريحات زوكربيرغ: الدكتاتورية الليبرالية تحكم الولايات المتحدة
- الأحدث: عماد الدين الفلسطيني
- منذ 3 دقيقة
منتدى الأخبار
نتنياهو يبحث مع مسؤولين أمنيين إسرائيليين مفاوضات وقف إطلاق النار في غزة
- الأحدث: عماد الدين الفلسطيني
- منذ 3 دقيقة
منتدى الأخبار
بايدن يلقي خطاب الوداع من المكتب البيضاوي يوم الأربعاء
- الأحدث: عماد الدين الفلسطيني
- منذ 3 دقيقة
منتدى الأخبار
وزير الخارجية الفرنسي: باريس سوف ترد إذا واصلت الجزائر التصعيد
- الأحدث: عماد الدين الفلسطيني
- منذ 3 دقيقة
منتدى الأخبار