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 477 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 HFortier

  le 30/01/2017

Mise en forme du texte, des cellules et commentaires (GDocs Sheets)

Découvrez les diverses possibilités de mise en forme d'une cellule, du texte ou des chiffres dans GSheets.

Par HFortier

  le 01/04/2019

Synology : Comment monter un dossier distant sur son NAS

Nous allons voir pourquoi et comment monter un dossier distant sur son NAS.

Par HFortier

  le 25/08/2017

Flash - Modifier le moteur de recherche par défaut de Opera

Découvrez comment modifier le moteur de recherche par défaut du navigateur Opera, afin de le remplacer par le moteur de recherche de votre choix.

Par CRFormations

  le 15/11/2016

Messagerie : comprendre le mode conversation - (exemple) avec gmail

Comprendre / activer / désactiver le mode conversation de la messagerie avec Gmail.

Par L'informaticien

  le 12/10/2017

4K Video Downloader : meilleur logiciel pour télécharger les videos youtube

Salut Dans cette vidéo, je vais vous montrer Le meilleur logiciel pour télécharger les videos youtube facilement

  Rejoins la communauté !


Tuto Aléatoire