1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Décomposition en billets et pièces

Résolu
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
 - 6 déc. 2017 à 20:50
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 - 29 déc. 2017 à 21:28
Bonsoir,
j'espère être au bon endroit pour ce post.

Dans le cadre de son TFE, ma fille doit aider des enfants "différents" (handicapés mentaux, autistes, etc.) concernant l'éducation à la santé.
Je suis ne suis pas informaticien, mais j'essaye d'aider ma fille (normalement son établissement scolaire devait lui trouver une école d'informatique pour la partie technique, malheureusement personne n'a été trouvé.
Je me suis mis à la création d'un site internet qui devrait permettre aux enfants de faire virtuellement des achats de produits utilisés pour faire la cuisine. Ils devront choisir des aliments et les envoyer dans un panier. Ce panier sera imprimer afin de se rendre dans les magasins pour y faire les achats.
Mon PROBLEME est le suivant: pour éviter que ces enfants ne se fassent roulés ou ne se trompent, il faudrait qu'une page du site permette de visualiser la décomposition d'un montant en billets et en pièces. Sur excel, pas de problème pour moi, mais je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla. D'après mes recherches, il faudrait une programmation en javascript, langage que je ne connais malheureusement pas.
Peut être que, parmi vous, certains ont déjà fait ce genre d'exercice.
Si vous pouviez m'aider ou me renvoyer vers des sites, tutoriaux ou autres aides... je suis preneur.
Merci d'avance.
Bonne soirée.

jean-marie
A voir également:

9 réponses

Réponse 1 / 9
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
6 déc. 2017 à 21:17
Bonjour,


je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla

Ce n'est en effet pas possible.


j'espère être au bon endroit pour ce post.

Ca dépend... Pourquoi vouloir le faire en javascript ? Pourquoi pas en PHP si jamais tu connais un peu ?

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".
Si tu as "codé" un panier dans joomla (-donc en php...) pourquoi ne pas générer lors de l'affichage du récap de la commande la fameuse "décomposition" ?
Une image par "type" de monnaie (pieces, billets) ...
Un calcul (en php ) pour savoir combien de chaque il faut (ça tu peux le calculer puisque tu l'as déjà fait sous excel visiblement) .. il suffit donc d'appliquer la formule à ton code php.
puis affichage à l'aide de l'instruction php ECHO et de quelques balises HTML ( <img> pour commencer... )



0
Réponse 2 / 9
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
Modifié le 8 déc. 2017 à 16:14
bonjour,

j'avais dit javascript, car j'avais lu sur le net que c'était mieux... PHP je ne connais pas vraiment, juste capable d'aller faire qq modification dans un code.
Mon panier a été réalosé avec Hikashop, mais ne comporte pas de prix.... et l'enseignante voudrait pouvoir se servir de cette décomposition indépendamment du reste. J'aime bien ton commentaire... il suffit d'appliquer... et ensuite qq balises HTML... cela à l'air si facile, probablement pour ceux qui connaissent, mais pour moi cela a l'air très compliqué :-)

Merci de ton aide
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
8 déc. 2017 à 20:17
Tu ne sais pas coder en js ...
Tu ne sais pas coder en php ...
Tu n'as pas l'air de vouloir essayer ....

Alors on fait quoi ??

Désolé si ma réponse ne te convient pas mais... ici ... on aide à coder ... on ne fourni pas le travail tout cuit !

De plus..tu n'as pas répondu à la principale question :

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".

Sans savoir comment fonctionne ton fichier excel actuellement.... ni même comment tu envisagerai le fonctionnement.... il nous sera difficile de te proposer quoi que ce soit.
Et puis.. on ne sait rien du code de ton site ....
A quel endroit se trouve le "montant" à décomposer ? A quel moment veux tu procéder à ce découpage ? Dans quel fichier comptes tu mettre ton code (js ou php...peu importe)...





.
0
Réponse 3 / 9
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
9 déc. 2017 à 10:42
Bonjour,

je trouve tes paroles blessantes, je n’ai jamais demandé qu’on me fournisse le code tout fait, mais si tu avais bien lu mon premier post, je demandais de l’aide pour trouver des tutoriaux ou des sites internet sur le sujet.

Tu m’as déjà aidé en me signalant que le PHP était plus approprié.

Pour répondre à tes questions:
- mon site est en Joomla
- la décomposition devrait se trouver dans un article du site
- c’est l’enfant qui devrait introduire le montant, qui sera totalement indépendant du reste du site
- mon fichier Excel comporte une feuille cachée avec les calculs et une feuille visible comportant une cellule ou introduire le montant et des cellules contenant le resultat de la décomposition, chacune de ces cellules sera placée à côté des l’image du billet ou de la pièce correspondante.

Merci de prendre le temps de me lire
Bon week-end
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
9 déc. 2017 à 12:58
Tu m’as déjà aidé en me signalant que le PHP était plus approprié

Je n'ai pas dit que c'était mieux... j'ai seulement indiqué que ça pouvait être une possibilité si jamais tu avais su coder en php (vu que tu indiquais ne pas connaitre le js...)

c’est l’enfant qui devrait introduire le montant, qui sera totalement indépendant du reste du site

Là on a une info utile.
Donc aucun automatisme lié au panier du site...
Dans ce cas...oui.. le js est sûrement plus simple.

Mais bon... il n'existe pas de tuto qui te permettra de faire cela ...
Il faut apprendre beaucoup de choses .. que ce soit en JS ou en PHP avant d'être capable de le réaliser....

En gros.. ça donnerait ça : 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>


=> Tu peux enregistrer le code dans un fichier .html pour le tester.
A toi ensuite d'aller le mettre dans ton article jommla (que je ne connais pas).

Enjoy !
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
9 déc. 2017 à 15:03
C’est super gentil d’avoir coder pour moi... je vais essayer dès que je serai sur mon ordinateur (je te réponds de mon iPad). Et je vais essayer, à l’aide de tutos, de comprendre ce que tu as fait.
Je te tiens au courant dès que j’ ai insérer ton code dans un article d’une de mes pages. Et un grand merci, cela va bcp aider ces enfants.
Bon week-end
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
Modifié le 9 déc. 2017 à 16:15
Je viens de tester dans une page Web... le calcul fonctionne parfaitement, mais l'affichage des images ne se fait pas dans Chrome mais bien dans Edge ???

Je me suis permis de rajouter le billet de 20€ qui avait été oublié, cela m'a déjà permis de me familiariser avec du code :-)

Bonne fin de journée.
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
9 déc. 2017 à 16:51
Ma fille trouve cela génial, elle te dit bien merci.

J'ai une question, je sais que je suis difficile :-) Pour faciliter l'utilisation par ces enfants handicapés, serait-il difficile de modifier ce code pour que seul les billets ou pièces utilisées soient affichés? Si c'est difficile ou trop long à faire, laisse tomber... tu nous as déjà rendu un fameux service.
MERCI ENCORE
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
9 déc. 2017 à 16:58
Il faut jouer avec la propriété de style "display" et ajouter une petite condition dans le code.
Comme ceci : 

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <img src="billet20.png">
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>

Bien entendu, pour les images .. tu mets ce que tu veux.
le "src" que j'ai utilisé c'était pour que tu saches bien à quoi ça correpondait...
0
Réponse 4 / 9
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
 144
9 déc. 2017 à 11:25
bonjour

pour simplifier il faut reproduire,retranscrire la méthode de calcule d'excel il faut donc comprendre comment fonctionne le calcule sur exel
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
9 déc. 2017 à 12:20
Le calcul sur Excel est assez simple il ne fait appel qu’a des divisions, soustractions ainsi que la fonction ENT (entier) et MOD (reste d’une division)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
Modifié le 16 déc. 2017 à 14:46
Bonjour, certains vont peut être trouver que je ne suis jamais content, car après avoir reçu généreusement, de Jordane45, le codage de mon problème, je reviens encore vers vous pour deux bugs.
J'ai essayé de comprendre le code fourni, pour essayer de faire les corrections moi-même, mais je dois me rendre à l'évidence: je n'ai pas les compétences pour y arriver, dommage.

Le premier bug est un problème de calculs, si on teste par exemple 9.47€ on aura 1x5 + 2x2 +2x0.2 + 1x0.05 + 1x0.02 + 6x0.01 ce qui fait 9.53 €… je me demande si ce n’est pas une question d’arrondis multiples dans les calculs vu qu’il y a l’utilisation de boucle ??
http://tfe.clic-nature.com/index.php/euros

Le second problème concerne la fin du calcul, si on reste sur la page et qu’on réintroduit un nouveau montant, on a parfois des résultats aberrants, comme si certains résultats étaient conservés. Fermer la page et la rouvrir corrige ce problème.
Sur les 9.47 de l’exemple précédent, je change le 9.47 en 12.39 après avoir fait calculer, j’obtiens 1x10 + 1x5 +1x2 +1x0.2 + 1x0.1 + 1x0.05 + 2x0.02 + 5x0.01 = 17.42 ????

le code se trouve dans le message 13 ci-dessus.

Merci d'avance.

Bon week-end
0
Réponse 6 / 9
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
Modifié le 16 déc. 2017 à 16:43
Tout est là : 

      function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauDizieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
      function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }


C'était en effet un pb d'arrondi;

J'ai aussi ajouté la réinitialisation .

Cordialement, 
Jordane                                                                 
0
Réponse 7 / 9
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
Modifié le 16 déc. 2017 à 17:00
merci beaucoup pour ta correction, mais est-ce normal que lorsque j'essaye 85.39 € j'ai comme décomposition en billet et pièce pour un total de 85.40 € ?
Pour 7.47€ j'ai 7.50 € : 1x5 + 1x2 + 1x0.5
Je suis désolé de chicaner, mais pour les enfants ce n'est pas possible d'avoir de telles différences.
Il arrondi au dixième et pas au centième d'euros

J'ai essayé en modifiant arrondirauDizieme par arrondirauCentieme mais cela ne corrige rien :-)

Encore merci pour tout ce que tu as fait pour moi et surtout pour eux.
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
16 déc. 2017 à 17:12
Petite erreur...
Il suffit de changer cette fonction 
function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }


Par exemple 
function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }

et bien entendu, modifié son appel dans le code : 
 function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }


Enfin bon.. sans vouloir être trop désagréable... tu aurais pu trouver par toi même si tu avais lu le code un minimum...
Mais bon....
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
16 déc. 2017 à 17:12
J'espère que cette fois ça sera bon.
Bonne soirée.
0
Réponse 8 / 9
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
28 déc. 2017 à 16:51
bonjour, le programme a été testé par les enfants, pour une grande partie de ceux-ci cela fonctionne bien. Par contre pour les enfants les plus déficients, ils ont des problème avec le nombre de billets ou de pièces... ils ne savent pas lire les nombres... serait-il possible (je pense que oui, j'ai fait pas mal d'essais, mais je n'arrive pas) d'afficher l'ensemble des images pour faire le montant. Si je m'exprime mal: par exemple s'il y a 2*20 € voir deux billets de 20€... plutôt qu'un billet et à coté 2*20 etc.
Merci et désolé d'encore vous solliciter.
Bonne soirée.
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
28 déc. 2017 à 17:57
Ca demande quelques évolutions dans le code...
La première chose à voir c'est :
As tu une image différentes pour chaque cas ( une image avec 2billets de 20 ... une image avec 3 billets de 10...) ou veux tu juste avoir (côte à côte) x fois la même image qui se répète ?

Ensuite.... par ce que bon.. à l'origine c'est comme ça que ça marche sur ce forum ... montre nous ce que tu as essayé de faire et indique nous sur quoi tu bloques....



Pour t'aider, je pense que les DIV "argent" devront être modifiées de la sorte : 
<div class="argent">
        <div id="images_0.1"></div>
        <span id="nb_0.1"></span>
      </div>

La 
 <div id="images_0.1"></div>
servira de "container" pour y placer la/les image(s) correspondantes.

En gros.. dans le JS, il faudra (au même endroit que là où on écrit le "nombre" d'argent (pièce/billet.) ajouter un bout de code qui crééra des balises IMG dans ce container

par exemple (juste pour illustrer) : 
document.getElementById("images_0.1").innerHTML = "<img src='tonimage'>";
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
Modifié le 28 déc. 2017 à 18:48
je n'aurais pas une image différente pour chaque cas, mais avoir cote à cote x fois la même image.

J'ai tellement trituré le code que j'ai tout jeté... mais à voir ce que tu à mis comme code, j'étais très loin de là... il faut que tu saches que je dois, pour chaque commande écrit dans ton code, aller sur le net pour essayer de comprendre ce que cela veut dire et surtout ce que cela fait... quand je modifie une ligne ou une partie de ligne je regarde ce que j'ai réussi à modifier...
Je vais essayer de comprendre les 6 lignes que tu viens de publier.
Pour ne pas que tu crois que je ne fais rien et que j'attends patiemment que la solution tombe toute seule, va voir ce que j'ai fait ces dernières semaines pour essayer d'aider ces enfants...
www.tfe.clic-nature.com
Merci bcp et bonne soirée.
0
Réponse 9 / 9
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
28 déc. 2017 à 19:18
Ceci devrait faire l'affaire : 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent .divimg{
      max-width:80%
    }
    .argent .divimg .img{
      max-width:50px;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <div id="img_500" class="divimg"></div>
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <div id="img_200" class="divimg"></div>
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <div id="img_100" class="divimg"></div>
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <div id="img_50" class="divimg"></div>
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <div id="img_20" class="divimg"></div>
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <div id="img_10" class="divimg"></div>
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <div id="img_5" class="divimg"></div>
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <div id="img_2" class="divimg"></div>
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <div id="img_1" class="divimg"></div>
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <div id="img_0.5" class="divimg"></div>
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <div id="img_0.2" class="divimg"></div>
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <div id="img_0.1" class="divimg"></div>
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
        function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var id_div_image = "img_"+montant;
            var divImg = document.getElementById(id_div_image);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              divImg.innerHTML = addImg(nbValeur,montant);
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }
      
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
     
     //génère X balises img
     function addImg(nbImgToAdd,valeurArgent){
        var retour = "";
        for(var i=1;i<=nbImgToAdd;i++){
          retour += createImg('img_' + valeurArgent);
        }
        return retour;    
     }
     
     //génère le html d'une balise IMG
     // les images seront nommées img_100.png  img_0.2.img ..etc...
     function createImg(idImg){
       return "<img src='"+idImg+".png'></img>";
     }

      
     
     
    </script>
  </body>
</html>


NB : Tu dois renommer les images de tes billets et pièces sous la forme :
img_valeur.png
Par exemple : pour le billet de 500 : img_500.png
pour la pièce de 10ct : img_0.1.png
etc...
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
28 déc. 2017 à 19:19
Sinon .. sympa ta page. :-)
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
28 déc. 2017 à 19:43
manque peut-être une info-bulle sur les icones du menu pour expliquer à quoi ça sert...
Tu peux utiliser un plugin jquery pour ça (pour faire du tooltip) (il en existe plein sur le net) ou sinon avec quelques lignes de javascript ...

Par exemple (sur le bouton) 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
      margin-bottom:40px;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent .divimg{
      max-width:80%
    }
    .argent .divimg .img{
      max-width:50px;
      
    }

    /*---------------------------------*/
    /* Pour faire un tooltip */
    /*---------------------------------*/
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover + .tooltiptext {
        visibility: visible;
        opacity: 1;
    }     
    /* Tooltip text */
    .tooltip + .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color:  #1a1917 ;
        color: #fff;
        text-align: center;
        padding: 8px;
        border-radius: 6px;

        /* Position the tooltip text */
        position: absolute;
        z-index: 10;
        //bottom: 125%;
        //left: 50%;
       // margin-left: -60px;

        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 1s;
    }

    /* Tooltip arrow */
    .tooltip + .tooltiptext::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid black;
        left: -8px;
        top: 7px;
    }
    /*---------------------------------*/
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()"  class="tooltip">
      <span class="tooltiptext"> 
        Cliquez ici vous rendra moins riche.. :-)
      </span>
    </div>
    <div class="affichage">
    
      <div class="argent">
        <div id="img_500" class="divimg"></div>
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <div id="img_200" class="divimg"></div>
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <div id="img_100" class="divimg"></div>
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <div id="img_50" class="divimg"></div>
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <div id="img_20" class="divimg"></div>
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <div id="img_10" class="divimg"></div>
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <div id="img_5" class="divimg"></div>
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <div id="img_2" class="divimg"></div>
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <div id="img_1" class="divimg"></div>
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <div id="img_0.5" class="divimg"></div>
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <div id="img_0.2" class="divimg"></div>
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <div id="img_0.1" class="divimg"></div>
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
        function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var id_div_image = "img_"+montant;
            var divImg = document.getElementById(id_div_image);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              divImg.innerHTML = addImg(nbValeur,montant);
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }
      
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
     
     //génère X balises img
     function addImg(nbImgToAdd,valeurArgent){
        var retour = "";
        for(var i=1;i<=nbImgToAdd;i++){
          retour += createImg('img_' + valeurArgent);
        }
        return retour;    
     }
     
     //génère le html d'une balise IMG
     // les images seront nommées img_100.png  img_0.2.img ..etc...
     function createImg(idImg){
       return "<img src='"+idImg+".png'></img>";
     }

      
     
     
    </script>
  </body>
</html>
0
jmp365
Messages postés
21
Date d'inscription
mercredi 6 décembre 2017
Statut
Membre
Dernière intervention
29 décembre 2017
29 déc. 2017 à 14:59
bonjour,

je viens de tester ton nouveau code, j'ai un gros soucis d'affichage, les billets et les pièces se chevauchent?
Voir http://tfe.clic-nature.com/index.php/argent
De plus si j'incorpore le code dans cette page http://tfe.clic-nature.com/index.php/euros les images n'apparaissent pas... j'ai voulu modifier le code pour donner le chemin des images, par exemple
<div class="argent">
<div id="images/billets/img_2" class="divimg"></div>
<span id="nb_2"></span>

cela ne fonctionne plus... à mon avis je passe à coté de qq chose... comme d'habitude...
Serait-il possible, de supprimer le nombre ainsi que la valeur du billet et des pièces? Moins il y a de texte, mieux c'est... ils ne savent pas lire. C'est pourquoi, ton info-bulle... pour eux c'est mieux un bouton :-)
Désolé de t'embêter à nouveau.
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
29 déc. 2017 à 17:01
Tu dois mettre le chemin vers les images dans le javascript : 
function createImg(idImg){
       return "<img src='images/billets/"+idImg+".png'></img>";
     }
0
jordane45
Messages postés
35429
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 mai 2022
 356
29 déc. 2017 à 17:01
Après.. pour ce qui est de la disposition des billets ... là .. faut jouer avec le style (le css).
0

sur les mêmes thèmes