Maison >interface Web >js tutoriel >Utilisez js pour utiliser CSS pour implémenter js afin de modifier les compétences de l'exemple_javascript de l'image d'arrière-plan

Utilisez js pour utiliser CSS pour implémenter js afin de modifier les compétences de l'exemple_javascript de l'image d'arrière-plan

WBOY
WBOYoriginal
2016-05-16 16:56:011158parcourir

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 :

ar imgArr=["http:// www.jb51 .net/logo_cn.png",
"http://www.jb51.net/baidu_sylogo1.gif",
"http://www.jb51.net/news/uploadImg/20120111/ 20120111081906_79.jpg ",
"http://www.jb51.net/news/uploadImg/20120111/20120111081906_76.jpg"];

Veuillez remplacer les images ci-dessus par les vôtres.

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 actuelle générée aléatoirement

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 :


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn