Bouton qui génère 1 ou 0

Version imprimable

05/05/2014, 10h54
thiseo

Bouton qui génère 1 ou 0

Bonjour,

Je ne suis pas expert en codage et j'aimerais savoir s'il était possible de coder mon besoin (personnel) suivant. Et si c'est possible, si vous pouvez m'aider.

Ma question :
Créer un bouton qui génèrerait aléatoirement un chiffre : soit 1 soit 0. Si c'est 0, l'image associé à 0 s'affiche. Si c'est 1, l'image associé à 1 s'affiche. En tout, un bouton doit généré 3 images de suite. Au bout de ces trois images, nous aurions le total de ces 3 images (soit 0,1,2,3)

Ce qui revient à dire que dans l'ordre, de gauche à droite, nous aurions :
LE BOUTON - La première image - La seconde image - La troisième image - LE RESULTAT en chiffre (des trois images)
05/05/2014, 13h48
sekaijin

OUI

Maintenant que tu sais que c'est possible il te reste à le faire ;)
A+JYT
05/05/2014, 13h58
thiseo

Merci pour ta réponse.
Pourrais-tu m'aider à le faire ?

Je te remercie par avance.
05/05/2014, 14h05
SpaceFrog

regarde du coté de

Code:

Math.random()
05/05/2014, 15h08
Kaamo

Ou un ptit hack : :mrgreen:

Code:

new Date%2
05/05/2014, 15h43
Bovino

Pas mal en effet. ;)
Du coup, je pense que tu vas être le prochain à qui thiseo demandera de faire son code ! :mouarf:
05/05/2014, 20h40
thiseo

J'avoue que rien de tout ça me parle.
Alors, à moins qu'une âme charitable se propose de me le coder, effectivement, sinon, je vais me pencher sur ce que vous m'avez donné.

Merci en tout cas pour vos réponses
07/05/2014, 03h03
Watilin
Juste pour expliquer les propositions qui ont été faites :
- Math.random est une fonction qui renvoie un nombre aléatoire (à virgule) entre 0 et 1. Pour obtenir un nombre entier, il est nécessaire de multiplier (si nécessaire) puis d'arrondir le résultat. Les méthodes pour arrondir sont :
  - Math.floor qui arrondit à l'unité inférieure (ex : 3.7 => 3)
  - Math.ceil qui arrondi à la supérieure (4.3 => 5)
  - Math.round qui arrondit au plus proche (7.1 => 7 ; 7.6 => 8)
- new Date%2 (astucieux Kaamo, je suis épaté encore une fois) tire parti du fait que les objet Date se convertissent tous seuls en entiers quand on les utilise dans une opération de nombres. Ils se convertissent en timestamps qui représentent le nombre de millisecondes écoulés depuis le 1er janvier 1970.
  
  Le % est l'opérateur modulo. a % b renvoie le reste de la division de a par b. Avec 2, les résultats possibles sont 0 ou 1.
  
  Comme les millisecondes défilent très vite pour l'esprit humain, on peut considérer que les timestamps sont des nombres aléatoires. Cela dit, les instructions JavaScript sont plutôt de l'ordre des microsecondes, ce qui fait qu'on risque d'obtenir plusieurs fois le même nombre si on utilise cette technique plusieurs fois dans la même fonction. Dans ton cas thiseo, il vaut mieux utiliser Math.random.

Yop.

j'avais un peux de temps, j'ai codé un exemple, ça pourra t'aider je pense.

http://jsfiddle.net/yjhfn/

Le code :

Code:

1
2
3
4
5
6
<img class="pomme" id="Verte" src="http://www.leclaireurdechateaubriant.fr/files/2013/09/Pomme-630x0.jpg" alt="pomme">
<img class="pomme" id="Jaune" 
    src="http://media.meltyfood.fr/article-1083946-ajust_930/les-golden-pomme-la-plus-repandue-sur-vos.jpg" alt="pomme" >    
<button id="add_elem">Add elem.</button>
<button id="clear_elem">Clear</button>
<div class="panier" id="elem"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function(){    
    var tab = [];
    var nb_elem = 0;
    var tab_elem = [];
    tab.push($("#Verte"), $("#Jaune"));
 
    tab[0].hide();
    tab[1].hide();
 
    $("#add_elem").click(function(){
        if (nb_elem < 3){
            var Brand = Math.round(Math.random());
            tab_elem.push(Brand);
            $("#elem").append(tab[Brand].clone().show()); 
            nb_elem++;
            if (nb_elem === 3){ $("#elem").append(tab_elem.toString()); }
        }
    });
 
    $("#clear_elem").click(function(){
        $("#elem").empty(); 
        tab_elem = [];
        nb_elem = 0;
    });
 
});

Code:

1
2
3
4
5
6
7
8
.panier{    margin-top : 20px;
    min-height : 150px;
}
 
 
.pomme{
    height : 100px;
}