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à.
Bonjour, voici une explication.
D'abord pour comprendre voici un exemple qui décortique le programme :
[html]<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>[/html]
Et voici une simplification qui rebondit sur ton programme initial :
[html]<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>[/html]*
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à.
