الدرس 5: تغير لون الخلفية بشكل عشوائي بإستخدام jQuery

سنتعرف من خلال هذا الدرس على كيفية تغير لون الخلفية خلال فترة معينة من الزمن – طبعاً يمكننا تحديد هذه الفترة – سنقوم بإستخدام كود بسيط نوعاً ما وسنقوم باستدعاء مكتبة jQuery .

 

سنتعرف على نوعان من تغير اللون:

– اختيار لونين حيث يتم النقل بين التدرجات لهذين اللونين.

– تنقل عشوائي بين جميع الألوان المتاحة.

 

هيا لنبدأ . . .

أول نوع اختيار لونين حيث يتم النقل بين التدررجات لهذين اللونين كما في الكود التالي:

<html lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
   function toggle_color(color1,color2,cycle_time,wait_time) {
   setInterval(function first_color() {
   $("body").animate({
   backgroundColor: color1
   }, 1000, function () {
      setTimeout(change_color, wait_time);
   });
}, cycle_time);
 
function change_color() {
   $("body").animate({
   backgroundColor: color2
   }, 1000, function () {
      setTimeout(function () {}, wait_time);
   });
  }
}
 
toggle_color('#61beb3','#7d4b68',3000,1000);
});
</script>
</body>
</html>

 

في البداية قمنا باستدعاء مكتبة jQuery ومكتبة أخرى بإسم “jquery.effects.core.js” وفي كود jQuery  لن نقوم بشرحه بالتفصيل ولكن ما يهمنا منه هو السطر التالي والذي نتحكم من خلاله باللونين الذي سوف نختارهما إضافة إلى توقيت بقاء كل لون والفاصل بينهما . . .

toggle_color('#61beb3','#7d4b68',3000,1000);

لدينا 4 متغيرات الأول هو كود اللون الأول “#61beb3” والثاني هو كود اللون الثاني “#7d4b68” والثالث هو مدة بقاء كل لون قبل أن يتم تغيره وهنا إخترنا 3000 ميلي ثانية أي 3 ثوان، والرابع هو الفاصل بين كل تغير وهنا ثانية واحدة.

لمشاهدة مثال أون لاين من هنا

 

النوع الثاني  وهو تنقل عشوائي بين جميع الألوان المتاحة كما في الكود التالي:

<html lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
  function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function change_random_bgcolor(change_time) {
  setInterval(function change_color() {
    $("body").animate({
      backgroundColor: getRandomColor()
    }, 500);
  }, change_time);
}
change_random_bgcolor(1000);
});
</script>
</body>
</html>

 

كما في المثال الأول  قمنا باستدعاء مكتبة jQuery ومكتبة أخرى بإسم “jquery.effects.core.js” وقمنا بكتابة كود jQuery ، والذي يهمنا منه هو السطر التالي

change_random_bgcolor(1000);

حيث يحوي على متغير واحد وهو المدة بين كل لون والآخر وكما نرى هنا لا نقوم بإختيار أي ألوان لإن إختيار الألوان سيكون عشوائياً.

لمشاهدة مثال أون لاين من هنا

 

 ملاحظة: هذا الشرح يمكن تطبيقه على جميع العناصر في الصفحة وليس فقط على الخلفية، كالنصوص والأشكال والـ “DIV” .

 

إذا واجهتكم أي مشاكل في التركيب أو أي استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

شارك برأيك