اليوم ، سألني أحد الأصدقاء على Weibo إذا كان بإمكاني استخدام JS و CSS لجعل الصفحة تحديثًا بشكل عشوائي صورة خلفية في كل مرة أقوم فيها بتحديثها. يمكنك القيام بذلك على وجه التحديد:
1. استخدم JS لتحديد صفيف صورة ، والذي يخزن الصور التي تريد عرضها بشكل عشوائي
نسخة الكود كما يلي:
var imgarr = ["http://www.google.com.hk/intl/zh-cn/images/logo_cn.png" ،
"http://www.baidu.com/img/baidu_sylogo1.gif" ،
"
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_76.jpg"
] ؛
لقد وجدت 4 صور هنا وألقيت نظرة.
2. استخدم JS لإنشاء رقم عشوائي ، بالطبع ، يبدأ هذا الرقم العشوائي من 0 وينتهي من imgarr.length-1.
نسخة الكود كما يلي:
var index = parseint (math.random ()*(imgarr.length-1)) ؛
بهذه الطريقة نحصل على الصورة التي تم إنشاؤها عشوائيًا حاليًا
نسخة الكود كما يلي:
var currentImage = imgarr [index] ؛
3. منذ أن تم إنشاء صورة الخلفية بشكل عشوائي ، استخدم JS لاستخدام هذه الصورة كصورة الخلفية.
نسخة الكود كما يلي:
document.getElementById ("backgroundarea"). style.backgroundImage = "url ("+currentImage+")" ؛
نظرًا لأن هذا عرض تجريبي ، فقد حددت div مع معرف BackgroundArea على الصفحة ، وكذلك ضبط خلفية عشوائية لهذا div.
نسخة الكود كما يلي:
<div id = "backgroundarea">
</div>