Modérateur PHPfrance |
2575 Messages
16 mars 2016, 22:41
Bonjour, voici une explication.
D'abord pour comprendre voici un exemple qui décortique le programme :
<div class="place vert">Cadre exemple n°1</div>
<div class="place orange">Cadre exemple n°2</div>
<div class="place rouge">Cadre exemple n°3</div>
<style>
.place {
width : 200px;
height : 200px;
position: absolute;
}
.vert {
background-color: green;
}
.orange {
background-color: orange;
}
.rouge {
background-color: red;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
//définir la plage min/max pour tirer un entier au hasard
var min = 5;
var max = 800;
//ici la plage compte (800-5 = 795)+1 = 796 points possibles
//donc il faut trouver au hasard un point des 796 points possibles allant de 5 jusqu'à 800
//en math ça s'écrit : (x% * (800 - 5 + 1)) + 5 où x% est un pourcentage de probabilité (hasard)
//par exemple : 50% de 796 = 398 donc le point à trouver est le 398 ième à partir de 5. => 398 + 5 = 403 (milieu de la plage [5,800])
//donc la bonne formule est : (hasard * (max - min + 1)) + min
//en php => (Math.random() * (max - min + 1)) + min
//mais puisque Math.random() est un pourcentage il faut convertir le tout en entier pour éviter les fractions
//pour cela on utilise : Math.floor(Math.random() * (max - min + 1)) pour convertir le nombre trouvé en entier
//ce qui donne : Math.floor(Math.random() * (max - min + 1)) + min; donc qui retourne un nombre entier entre min et max compris
//parcourir tous les éléments html stylés par la classe ".place"
$(".place").each(function(){
//déterminer les points top et left au hasard entre min et max
var point_top = Math.floor(Math.random() * (max - min + 1)) + min;
var point_left = Math.floor(Math.random() * (max - min + 1)) + min;
//tout élément html stylé par la classe ".place" sera placé à la position top/left définie au hasard
$(this).css("top", point_top).css("left", point_left);
});
});
</script>
Et voici une simplification qui rebondit sur ton programme initial :
<div class="place vert">Cadre exemple n°1</div>
<div class="place orange">Cadre exemple n°2</div>
<div class="place rouge">Cadre exemple n°3</div>
<style>
.place {
width : 200px;
height : 200px;
position: absolute;
}
.vert {
background-color: green;
}
.orange {
background-color: orange;
}
.rouge {
background-color: red;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".place").each(function(){
//ici on utilise directement une fonction getRandomInt qui s'occupe de déterminer un point au hasard
$(this).css("top", getRandomInt(5,800)).css("left", getRandomInt(5,800));
});
});
/**
* Création de la fonction getRandomInt
* qui doit retourner au hasard un entier entre min et max compris
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
*
Moralité : Ce qu'il te manquait c'est la déclaration de la fonction getRandomInt(min, max) car elle ne fait pas partie des fonctions de base de javascript

Voilà.
--------
//////----
//---
//----
//////
-------
//---
//----
//---
//----
//---
//
------
//////----
//////-----
//////
-----
||--------
||--
||---
||
Prendre le recul n'est pas une perte de temps.
ps:
Affrontez moi dans l'arène