Script #5 تغيير لون الكتابة في حسوب IO

السلام عليكم

فكرة الكود التالي هي تغيير لون الفقرات أثناء قراءتك للنقاشات الطويلة، حيث ستأخذ تدرجات الرمادي بدءًا من الأسود وانتهاءً بالأبيض

يحوي الكود بعض الرياضيات التي سيتم شرحها

خطوات العمل:

1- الإمساك بجميع النصوص الموسومة بـوسم الفقرات p

var p=document.querySelectorAll("p")

2- عدد الفقرات هو p.length، ونريد أن يكون لون الفقرة الأخيرة 255 (أبيض) والاولى سوداء، لذلك سنوجد المقدار x

var x=255/p.length

ويكون لون الفقرة هو i*x حيث i رقم الفقرة

3-نمر على جميع الفقرات، بحلقة for

for(var i=0;i<p.length;i++)
{

4-نوجد قيمة اللون الموافق للفقرة i وسيمثل b لون الخلفية وc لون النص

var b=Math.floor(x*i)

var c=Math.floor(255-x*i)

5- نقوم بإسناد الألوان إلى كلّ من الخلفية والنص

p[i].style["background-color"]="rgb("+b+","+b+","+b+")"

p[i].style["color"]="rgb("+c+","+c+","+c+")"

وتنتهي هنا حلقة for

}

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


وعليكم السلام، هذه فكرة الكود: تغيير لون الفقرات أثناء القراءة بتدرجات الرمادي. الخطوات:

احصل على جميع الفقرات:

javascript

var p = document.querySelectorAll("p");

حساب المقدار x:

javascript

var x = 255 / p.length;

تغيير لون الفقرات باستخدام حلقة:

javascript

for (var i = 0; i < p.length; i++) {

  var grayValue = Math.floor(i * x);

  p[i].style.color = "rgb(" + grayValue + "," + grayValue + "," + grayValue + ")";

}

بهذا الكود، ستتغير ألوان الفقرات من الأسود إلى الأبيض بتدرجات الرمادي.