1

Script #6 تغيير لون النصوص في الصفحة وكأنّها تومض ببطء

السلام عليكم

الكود التالي سيقوم بتغيير لون الكتابة الموسومة بوسم الفقرات p بدءًا من اللون الرمادي وصولًا إلى الأبيض، ثم ترجع للون الأسود نزولًا.

1-نجلب الفقرات الموسومة بـp

var p=document.querySelectorAll("p")

2-سيكون المتغير i هو اللون الذي يتم تغييره ونبدأ بالرمادي 128

var i=128

3-سيحدد المتغير up هل نصعد أم نزل في اللون مع الزمن وسيبدأ بالصعود

var up=true

4-تابع تغيير اللون يعمل كما يلي: نزيد اللون من 128 إلى 255 ثم ننقصه من 255 إلى 128

function step()
{
if(up){
    if(i<255)
        i++
    else
        up=false
}else{
    if(i>128)
        i--
    else
        up=true
}
}

5-ننشئ التابع x ونكتب بداخله var b=Math.floor(i) var c=Math.floor(i-128) المتغير b السابق سيحدد لون الخلفية والمتغير c لون النص (لاحظ وجود فرق 128 درجة لنتمكن من رؤية النص) 6-نقوم بتغيير لون الفقرة والنص لكل الفقرات

for(var j=0;j<p.length;j++)
{
    p[j].style["background-color"]="rgb("+b+","+b+","+b+")"
    p[j].style["color"]="rgb("+c+","+c+","+c+")"
}

7-بعد كل عملية تغيير نستدعي التابع step ليقوم بزيادة اللون

8- أخيرًا نستدعي التابع setInterval ليقوم باستدعاء x كل 30 ميللي ثانية

interval=setInterval(x,30);

إذا أردت إيقاف الألوان عن التغيّر يمكنك كتابة السطر التالي متى أردت:

clearInterval(interval)

ولكن حاول تنفيذ السطر السابق عندما يكون لون الخلفية أبيضًا.

والله وليّ التوفيق

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
Mostafa_36a2 أضف ردا

الكود الكامل للمستعجلين

var p=document.querySelectorAll("p")
var i=128
var up=true
function step()
{
    if(up){
        if(i<255)
            i++
        else
            up=false
    }else{
        if(i>128)
            i--
        else
            up=true
    }
}
function x(){
    var b=Math.floor(i)
    var c=Math.floor(i-128)
    for(var j=0;j<p.length;j++)
    {
        p[j].style["background-color"]="rgb("+b+","+b+","+b+")"
        p[j].style["color"]="rgb("+c+","+c+","+c+")"
    }
    step()
}
interval=setInterval(x,30);