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

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

WBOY
Libérer: 2016-05-16 16:56:01
original
1364 Les gens l'ont consulté

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 :

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal