Aujourd'hui, un ami m'a demandé sur Weibo si je peux utiliser JS et CSS pour faire en sorte que la page soit rafraîchie de manière aléatoire une image de fond chaque fois que je la rafraîchis. Vous pouvez le faire spécifiquement:
1. Utilisez JS pour définir un tableau d'images, qui stocke les images que vous souhaitez afficher au hasard
La copie de code est la suivante:
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_79.jpg",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_76.jpg"
]]
J'ai trouvé 4 photos ici et jeté un coup d'œil.
2. Utilisez JS pour générer un nombre aléatoire, bien sûr, ce nombre aléatoire commence à partir de 0 et se termine à partir d'imgarr.length-1.
La copie de code est la suivante:
var index = parseInt (math.random () * (imgarr.length-1));
De cette façon, nous obtenons l'image actuellement générée aléatoire
La copie de code est la suivante:
var currentImage = imgarr [index];
3. Étant donné qu'une image d'arrière-plan a été générée au hasard, utilisez JS pour utiliser cette image comme image d'arrière-plan.
La copie de code est la suivante:
document.getElementById ("backgroundarea"). style.backgroundImage = "url (" + currentImage + ")";
Puisqu'il s'agit d'une démo, j'ai défini une div avec l'ID de Backgroundarea sur la page, et j'ai également défini un arrière-plan aléatoire pour cette div.
La copie de code est la suivante:
<div id = "backgroundarea">
</div>