je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla
j'espère être au bon endroit pour ce post.
Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".
<!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>
<!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="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 class="argent"> <img src="piece5ct.png"> <span id="nb_0.05"></span> </div> <div class="argent"> <img src="piece2ct.png"> <span id="nb_0.02"></span> </div> <div class="argent"> <img src="piece1ct.png"> <span id="nb_0.01"></span> </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','0.05','0.02','0.01']; 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>
EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :ICIMerci d'y penser dans tes prochains messages.Jordane45 |
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; }
function arrondiauDizieme(nombre){ return Math.round(10*nombre)/10; }
function arrondiauCentieme(nombre){ return Math.round(100*nombre)/100; }
function divrest(valArgent,montantrestant){ var result=[]; result[0] = montantrestant / valArgent; result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent)); return result; }
<div class="argent"> <div id="images_0.1"></div> <span id="nb_0.1"></span> </div>
<div id="images_0.1"></div>servira de "container" pour y placer la/les image(s) correspondantes.
document.getElementById("images_0.1").innerHTML = "<img src='tonimage'>";
<!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>
//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='../images/billets/"+idImg+".png'></img>"; }