Opération JS CSS modifie aléatoirement l'arrière-plan de la page Web pour acquérir des compétences ideas_javascript

Aujourd'hui, un ami m'a demandé sur Weibo si je pouvais utiliser JS et CSS pour générer aléatoirement une image d'arrière-plan à chaque fois que la page est actualisée. Bien sûr, ma réponse est oui. Plus précisément, vous pouvez faire ceci :
1. Utilisez JS pour définir un tableau d'images, qui stocke les images que vous souhaitez afficher de manière aléatoire

Copier le code Le code est le suivant :

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"
];

Ici, j'ai trouvé au hasard 4 photos à regarder.
2. Utilisez JS pour générer un nombre aléatoire. Bien sûr, ce nombre aléatoire commence à 0 et se termine à imgArr.length-1

Copier le code. Le code est le suivant :

var index =parseInt(Math.random()*(imgArr.length-1)

De cette façon, nous obtenons l'image de génération aléatoire actuelle

Copier le code Le code est le suivant :

var currentImage=imgArr[index];

3. Puisqu'une image d'arrière-plan est générée de manière aléatoire, utilisez JS pour utiliser cette image comme image d'arrière-plan.

Copier le code Le code est le suivant :

document.getElementById("BackgroundArea"). style.backgroundImage ="url(" currentImage ")";

Comme il s'agit d'une démo, j'ai défini un div avec l'ID BackgroundArea sur la page, et j'ai également défini un arrière-plan aléatoire pour ce div.

Copier le code Le code est le suivant :