تصف هذه المقالة طريقة تبديل الخلفية بشكل عشوائي على JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
بادئ ذي بدء ، تحتاج إلى إعداد بعض الصور. يجب التحكم في حجم الصورة (سواء كانت حجمها أو حجم البيانات) بشكل جيد. إذا كان كبيرًا جدًا ، فسيجعل المستخدم غير قادر على الانتظار لعرض الصورة الكاملة والقفز. إذا كانت صغيرة جدًا ، فسيؤثر ذلك على جودة الصفحة.
قم بتجميع هذه الصور في صفيف في البرنامج النصي لسهولة الاتصال. طول الصفيف هو بالطبع عدد الصور.
انسخ الرمز كما يلي: var bodybgs = [] ؛ // قم بإنشاء متغير صفيف لتخزين المسار إلى صورة الخلفية
bodybgs [0] = "Images/01.jpg" ؛
bodybgs [1] = "الصور/02.jpg" ؛
bodybgs [2] = "الصور/03.jpg" ؛
bodybgs [3] = "الصور/04.jpg" ؛
bodybgs [4] = "Images/05.jpg" ؛
نظرًا لأن 5 صور تستخدم أعلاه ، يجب إنشاء رقم عشوائي من 0 إلى 4. إذا كان طول الصفيف مختلفًا ، فما عليك سوى تعديل المضاعف في الكود التالي.
نسخة الكود كما يلي: var randombgindex = Math.Round (Math.Random () * 4) ؛
هذه هي البرامج الأساسية. على الرغم من أنها بسيطة للغاية ، إلا أنها فكرة صغيرة. إذا كنت تستخدم هذا كأساس ، فيمكن إجراء بعض الوظائف الموسعة من خلال المعالجة. على سبيل المثال: تبديل الموضوع وغيرها من العروض التقديمية العشوائية ، وما إلى ذلك أدناه رمز JS الكامل.
انسخ الرمز كما يلي: <script type = "text/javaScript">
// <! CDATA [
var bodybgs = [] ؛
bodybgs [0] = "Images/01.jpg" ؛
bodybgs [1] = "الصور/02.jpg" ؛
bodybgs [2] = "الصور/03.jpg" ؛
bodybgs [3] = "الصور/04.jpg" ؛
bodybgs [4] = "Images/05.jpg" ؛
var RandomBgindex = Math.Round (Math.Random () * 4) ؛
// إخراج صورة خلفية عشوائية
document.write ('<style> body {background: url (' + bodybgs [randombgindex] + ') no-repeat 50 ٪ 0} </style>') ؛
//]]>
</script>
آمل أن يكون الوصف في هذه المقالة مفيدًا لبرمجة الويب للجميع بناءً على JavaScript.