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 408 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 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

Par L'informaticien

  le 29/11/2017

Comment convertir Apple Music vers MP3

Salut Dans cette vidéo, je vais vous montrer Comment convertir Apple Music vers MP3

Par L'informaticien

  le 03/12/2016

Récupérer le mot de passe de windows 7,8,8 1,10 facilement

Salut Dans cette vidéo, je vais vous montrer comment Récupérer le mot de passe de windows 7,8,8 1,10, windows server 2003,2008....

Par GdArros

  le 29/08/2016

Comment savoir quelles pages de mon site sont référencées ?

Dans ce tutoriel nous allons voir comment savoir quelles pages de votre site sont référencées sur Google ou Bing?

Par CRFormations

  le 22/11/2016

Fotosketcher - freeware de retouche d'images - vidéo 1/3

Il vous permet de réaliser des dessins et peintures du plus bel effet depuis vos images et photos en quelques clics - à découvrir absolument !

  Rejoins la communauté !


Tuto Aléatoire