كود بسيط يغير لون أي موقع بضغطة زر واحدة ، قم بتجربته

السلام عليكم

طورت كود ربما يعجبكم وهو عبارة عن رابط Bookmarklet يحتوي على كود جااسكريبت يطبق فلترCss "عكس الألوان" على الموقع بالكامل:

| filter: invert(100%);

على الموقع

طريقة تشغيله : (أنا جربته على متصفخ كروم)

هذا الكود يعمل من خلال عمود المفضلات في المتصفح [barre de favoris]

1) يجب أن تظهر عمود المفضلات ، وإذا ل يظهر لديك اضغط على كنترول وأَلت و حرف b في نفس الوقت [ctrl+alt+B]

2) بعدها ضلل [selectioner] النص التالي ، وقم بجره إلى عمود المفضلات لديك

تعديل : تم تطويره الكود من طرف @zakariamouhid مشكورا

javascript:void(document.body.style.filter=document.body.style.filter?'':'invert(100%)')

3) اضغط على الرابط الجديد لترى النتيجة

هكذا يظهر حاسوب مثلا

كود الجافاسكريبت المضمن :

$('body').css({
'filter':'invert(100%)',
  });

مارأيك في الفكرة

[@zakariamouhid

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

التعليقات

سؤال مبتدأ : مادور دالة void بشكل عام؟ وبشكل خاص في ذلك الكود؟

الدالة هي التي تقوم بالعمليات على دخل ما وتقوم لك بارجاع النتيجة ولذلك تكتب في تعريفها

int, string, double

مثلاً تخيل دالة تقوم بارجاع المتوسط الحسابي لعناصر مصفوفة:

float function avg (array<float> arr) {
    float sum = 0;
    for(int i = 0; i < arr.length; i++) {
        sum += arr[i]
    }

    return sum/arr.length
}

اما الاجرائية فهي دالة تقوم بعمل ما (مثلاَ طباعة شيء على الشاشة)، دون ان ترجع اي قيمة، تخيل مثلاً انت تريد ان تطبع رسالة خطأ عند حدوث خطأ ما في البرنامج، تمرر كود الخطأ للاجرائية وهي تطبع الرسالة بدون ارجاع اي قيمة ولذلك تعرف كـ void، مثلاً:

void function errorMessage(int code) {
    print("An error with code %d happened", code)
}

قد ترى كلمة return احياناً في الاجرائيات، لكن return; اي من دون اي قيمة، وتكتب اما من اجل ايقاف الدالة في منتصفها مثلاً عندو حدوث شرط معين، او فقط من اجل الحفاظ على شكل الكود

ما ألاحظه أنه يجري عملية negative للألوان، الأبيض يتحول أسود، البرتقالي يصير أزرق سماوي و هكذا بقية الألوان، حتى الصورة الشخصية تجري لها نفس العملية.

يطبق فلتر Css عكس الألوان على الموقع بالكامل

حركة جيدة

وأعجبتني فكرة وضع الرابط في المفضلات فدائما كنت أواجه مشكلة في نسخ الكود إلى الرابط


هذا تطوير للفكرة

javascript:void(document.body.style.filter=document.body.style.filter?'':'invert(100%)')

هذا الكود سيعمل على جميع المواقع حتى بدون وجود jQuery

وأيضا عند الضغط على الرابط مرة أخرى تعود الألوان لطبيعتها

كنت سأطلب منك ذلك ، هذا رائع ، يعجبني هذا

لماذا invert تحتوي على درجات ؟

جربت القيمة %50 فظهر كل شيء بلون رمادي

والمفروض ان يكون %50 بين %0 و %100 وليس حالة ثالثة

شكرا على الملاحظة قمت بتصحيح الخطأ

جرب الان

javascript:void%20function(){$(%22body%22).css({filter:%22invert(100%25)%22})}();

رائع.. عدله وبالتوفيق ^^

لا تكتب تعليقات لا تضف أي فائدة للنقاش

لكي لا نجعل الموقع عبارة عن منتدى ;)

اكتف بالتقييم فقط عند الشكر

بالتوفيق ^^

اريد اللون البنفسجي

اضف هذه لتحافظ الصور على لونها

$( 'img' ).css( { filter : ' invert( 100%) ' } );