تغيير خلفية الصفحة عند عمل Refresh بإستخدام الجافاسكريبت - مقال

  • p3r0

السلام عليكم ورحمة الله وبركاته

استكمالاً للمبادرة الأكثر من رائعة التي بدأها أخونا Hussam3bd .. وتشجيعا له :)

بسم الله نبدأ :)

في هذا الدرس سنقوم بكتابة سكربت صغير جدا بالـJavaScript .. مهمته هي تغيير خلفية الصفحة عند كل تحديث Refresh :) .

النتيجة النهائية ستكون كالتالي :

نبدأ بكتابة وسم Script الخاص بكتابة كود الجافاسكربت

<script>

ثم نقوم بإنشاء متغير جديد ونقوم باعطائه مصفوفة تحمل اكواد HEX الخاصة بالالوان التي سيتم التبديل بينها

 var bgcolors = new Array("#34495e", "#3498db", "#95a5a6", "#16a085", "#9b59b6")

ثم نقوم بعمل مسألة حسابية تقوم بدورها بتغيير اللون واختيار لون جديد من المصفوفة السابقة عن تحديث الصفحة , وتقوم بتعيين النتيجة كـbgColor للوسم Body

document.bgColor = bgcolors[Math.floor(Math.random()*bgcolors.length)]

ثم نقوم باغلاق وسم الـScript الذي بدأناه

</script>

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ الكود كاملا .. تستطيع ايجاده علي http://jsbin.com/yenova /1/edit?html او انسخه من هنا

<script type="text/javascript">
// You can edit this list of colors and add new ones
 var bgcolors = new Array("#34495e", "#3498db", "#95a5a6", "#16a085", "#9b59b6")
document.bgColor = bgcolors[Math.floor(Math.random()*bgcolors.length)]
</script> 

ايضا اذكركم ان المثال الحي تجدونه هنا

"اضغط علي الزر الموجود في المنتصف لتحديث الصفحة تلقائيا"

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

التعليقات

شكرًا لك، بعض الملاحظات:

أولاً: يفضل إنشاء المصفوفات بالأسلوب الحرفي هكذا:

  var bgcolors = ["#34495e", "#3498db", "#95a5a6", "#16a085", "#9b59b6"];

إنشاء المصفوفة باستدعاء المُشيد (constructor) يتصرف بطريقة غريبة عندما تمرر له أعداد مثلاً: new Array(5) يُنشئ مصفوفة فارغة فيها خمس مواقع. أمّا: new Array(5, 1)

فيُنشئ مصفوفة فيها عنصران هما 5، 1.

ربّما new Array() هي أسلوب PHP، أما جافاسكريبت فلن تجدها مستخدمة بشكل شائع.

ثانيًا: ما الداعي لإلحاق المتغير الدالة bgColors بعنصر المستند document؟ افرضها كمتغير في النطاق العام (global scope).

شكرا لاقتراحاتك ..

سيتم اخذها بعين الاعتبار .. :)

لا أفهم كثيرا في الجافا ! لدي فقط سؤال ! إذا أمكننا تبديل الألوان يمكننا تبديل الصور أيضا أليس كذلك ! وما الذي يمكن تغييره من أجل ذلك !

-1

اعتقد انك هكذا ستحتاج الي jQuery