Comment programmer un générateur aléatoire de backgrounds en Javascript ?  

Partagé par ThibaudArros le 15/09/2016  —  2 min de lecture

tutoriel-comment-programmer-un-generateur-aleatoire-de-backgrounds-en-javascript
5 LIGHTS 433 PERSONNES AIDÉES  

avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Pré-requis pour ce tutoriel :

  • Un éditeur de code (pour les fichiers .html et .js)
  • Des images


Prenons l’arborescence du projet suivante :
- nomProjet/
    - nomProjet.html
    - lib/
        - img/
            - poney.png
            - autruche.png
            - kangourou.png
        - js/
            - nomProjet.js

1 - Un dossier d'images

Ici, pas de difficulté. Il s'agit de créer un dossier avec les fameux backgrounds.

2 - Un fichier .html

<html>
<head>
<title>Generateur de backgrounds</title>
<meta charset="UTF-8"/>
</head>
<body>
<script src="lib/js/nomProjet.js"></script>
</body>
</html>

3 - Un fichier .js

// Création d'un tableau contenant les noms des différents backgrounds
var backgrounds = new Array("poney.png", "autruche.png", "kangourou.png");
// Récupération du nombre de backgrounds
var nb_backgrounds = backgrounds.length;
// Création d'un nombre compris entre 0 et le nombre de backgrounds - 1
var alea = Math.floor(Math.random() * nb_backgrounds);
// On charge le background au « body » de la page
document.body.style.background = "url(lib/img/"+backgrounds[alea]+") no-repeat center fixed";
// On étire le background pour qu'il couvre toute la page web
document.body.style.backgroundSize = "cover";

Note :Je vous invite fortement à jeter un coup d’œil à bibliothèque Javascript Jquery, qui simplifie grandement la syntaxe du code Javascript.

avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Tu as toi aussi des astuces ou des compétences à partager ? Ou tu souhaites tout simplement apprendre ? Rejoins notre communauté en t'inscrivant !


Commentaires (0)

Connecte-toi ou inscris-toi pour rédiger un avis.

Lis aussi . . .

Par GmR

  le 30/10/2016

Réalisation d'un CD : création d'un gabarit pour imprimer des étiquettes (1/5)

Méthode pour implanté un gabarit au millimètre sous Gimp et sans douleur.

Par GmR

  le 02/11/2016

Comment faire des tutos sous Linux : 06 – La bande son avec Audacity Partie 2

Comment faire des tutos sous Linux : 06 – La bande son avec Audacity Partie 2

Par johnart23

  le 02/03/2017

Gratilog : télécharger des logiciels gratuits sans pub

Dans ce tutoriel, je vais vous présenter le meilleur site de téléchargement de logiciels gratuits sans pub ni pop up...

Par GdArros

  le 24/09/2016

Comment pivoter une vidéo en ligne ?

Dans ce tutoriel nous allons voir comment retourner ou faire pivoter une vidéo en passant par un service en ligne rapidement et simplement.

Par L'informaticien

  le 26/03/2018

Tuto:Créer Des Albums Photos/Vidéo Web Avec JAlbum

Salut mes frères / soeurs Dans ce tuto je vais vous expliquez Comment Créer Des Albums Photos/Vidéo Web Avec JAlbum

  Rejoins la communauté !


Tuto Aléatoire