Sujet Précédent Sujet Suivant

Besoin d'aide pour un projet en javascript

Résolu/Fermé
Shxdely - 24 mars 2018 à 16:04
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 31 janv. 2019 à 08:37
Bonjour,

Je dois rendre un projet d'ici quelques mois, ça consiste à "développer" un script pour pouvoir calculer la masse molaire d'une espèce chimique. J'aimerais faire une case ou l'on rentre la formule brute et faire le calcul par la suite lors que le bouton "calculer" est actionné, cependant je ne sais pas quelle fonction utiliser, j'en ai trouvé plusieurs, mais je n'arrive pas à avancer, ce que j'aimerais faire c'est de vérifier les lettres puis de chercher s'ils sont dans un tableau, leur affecter la valeur de leur masse molaire multiplié par un ou le chiffre qui précède la formule. 

var formule="";
	
	var element = ["","H", "He", "Li"];
		element[1] = new Array ("H",1);
		element[2] = new Array ("He",4);
		element[3] = new Array ("Li",7);
		
	function start(){
    	    formule=document.getElementById('formule').value;
}
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
24 mars 2018 à 17:10
Bonjour,

Tu n'as pas commencé grand chose .....

Inspire toi de ça : 
<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>EXO</title>
	</head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="formule">
      <input type="button" value="calculer" onclick="start();">
      <div style='margin-top:10px;margin-left:5px;height:25px;width:250px;background-color:#fbef7b;'>
        <label>Résultat</label>
        <span id="resultat"></span>
      </div>
    </div>
    
    <script type="text/javascript">
      var element = { 'H':1
                     ,'HE':4
                     ,'Li':7
                    };
      
      
      function start(){
        var formule=document.getElementById('formule').value;  
        console.log('Formule : ' + formule);
        //je fais un exemple avec une seule valeur...
        //si tu entres plusieurs "valeurs" dans ton champ formule.. faudra boucler sur chaque valeur.. (je te laisserai chercher ce point !)
        var result = getElementValue(formule);
         console.log(result);
          
        //affichage du réltat
        document.getElementById('resultat').innerHTML = result;
      }
      
      
      function getElementValue(valToCheck){
        if(typeof(valToCheck)!='undefined' && valToCheck!=null){
          if(element.hasOwnProperty(valToCheck)){
            return element[valToCheck];
          }else{
            return 0;
          }
        }
      }
    </script>
  </body>
</html>

1
Shxdely
Modifié le 24 mars 2018 à 17:31
Salut, voici un lien de tout les "version" que j'ai essayer de faire, mais mon problème majeur c'est lorsque je veux vérifier le "i+1" ou le "i+2" dans la boucle.

https://drive.google.com/open?id=1ylFvvcJjjt71La1STMWGXBW730TnOHW2
0
Shxdely
24 mars 2018 à 18:16
Salut, désolé de te déranger je suis partie sur un truc comme ça : 

var element = { 'H':1
                     ,'He':4
                     ,'Li':7
                    };
      
      for (var i=0; i < element.length; i++);
		var espace = element[i]
		
		function start(){
			var formule=document.getElementById('formule').value;  
			console.log('Formule : ' + formule);
			var result = getElementValue(formule);  
			document.getElementById('resultat').innerHTML = result; //affichage du réltat
			splitString(formule, espace); //divise la chaine de caractère
			}
			
		function getElementValue(valToCheck){
			if(typeof(valToCheck)!='undefined' && valToCheck!=null){
				if(element.hasOwnProperty(valToCheck)){
					return element[valToCheck];
				}else{
					return 0;
				}
			}
		}			
		 
		function splitString(stringToSplit, separator) {
			var arrayOfStrings = stringToSplit.split(separator);
			
			console.log('La chaine d\'origine est : "' + stringToSplit + '"');
			console.log('Le délimiteur est : "' + separator + '"');
			console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
			
			 for (var i=0; i < stringToSplit.length; i++);
				console.log(arrayOfStrings[i] + " / ");
			}


En gros j'aimerais divisé la chaine de caractère en un tableau grace à "split()" en fonction des atomes présent dans le tableau element, mais j'ai l'impression que ça ne fonctionne pas trop :c
0
Réponse 2 / 7
Shxdely
Modifié le 25 mars 2018 à 21:23
Petit update : 
var atoms = {
    H: 1.00794,
	He: 4.002602,
    Li: 6.941,
	Be: 9.012182,
	B: 10.811,
	C: 12.011,
	O: 15.9994,
	F: 18.9984032,
	Ne: 20.1797,
	Na: 22.989770,
	Mg: 24.3050,
	Al: 26.981539,
	Si: 28.0855,
	P: 30.973762,
	S: 32.066,
	Cl: 35.4527,
	Ar: 39.948,
	K: 39.0983,
	Ca: 40.078,
	Sc: 44.95591,
	Ti: 47.88,
	V: 50.9415,
	Cr: 51.9961,
	Mn: 54.93805,
	Fe: 55.847,
	Co: 58.9332,
	Ni: 58.69,
	Cu: 63.546,
	Zn: 65.39,
	Rb: 85.4678
};
document.getElementById('calculate').addEventListener('click', () => {
    let formula = document.getElementById('formula').value;
    document.getElementById('resultat').innerHTML = "";
 
    if (formula)
    {
        formula = formula.split(' '); // La formule doit avoir des espaces entres chaque types
        let totalMass = 0; // On commence par une masse de zéro
     
        for (let atom in atoms)
                for (let i = 0; i < formula.length; i++)
                    if (formula[i] == atom)
                            totalMass += atoms[atom]; // On additionne les masses atomiques de la formule
               
            document.getElementById('resultat').innerHTML = totalMass;
    }
    else
            console.error('La formule est vide!');
});


Si quelqu'un pouvait m'aider pour intégrer les nombre stœchiométrique ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mars 2018 à 22:46
Pourquoi boucler sur atom alors ue je t'ai donné une fonction (getElementValue) ?
C'est sur fotmula que tu dois faire ta boucle...
0
Réponse 3 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mars 2018 à 23:06
Bref : 
var atoms = {
    H: 1.00794,
    He: 4.002602,
    Li: 6.941,
    Be: 9.012182,
    B: 10.811,
    C: 12.011,
    O: 15.9994,
    F: 18.9984032,
    Ne: 20.1797,
    Na: 22.989770,
    Mg: 24.3050,
    Al: 26.981539,
    Si: 28.0855,
    P: 30.973762,
    S: 32.066,
    Cl: 35.4527,
    Ar: 39.948,
    K: 39.0983,
    Ca: 40.078,
    Sc: 44.95591,
    Ti: 47.88,
    V: 50.9415,
    Cr: 51.9961,
    Mn: 54.93805,
    Fe: 55.847,
    Co: 58.9332,
    Ni: 58.69,
    Cu: 63.546,
    Zn: 65.39,
    Rb: 85.4678
};


document.getElementById('calculate').addEventListener('click', () => {
    var totalMass = 0; // On commence par une masse de zéro
        document.getElementById('resultat').innerHTML = "";
        
    var formula = document.getElementById('formula').value;
    console.log('formula :'+formula);
    if (typeof(formula)!='undefined' && formula!=null){
        var splitformula = formula.split(' '); // La formule doit avoir des espaces entres chaque types

        for (var i=0 ; i< splitformula.length;i++){ //on boucle sur la formule
          var F = splitformula[i];
          console.log('F : '+F);
          var Mass = parseFloat(getElementValue(F));  //on va chercher la valeur correspondante
          console.log('Mass : '+Mass);
          totalMass += Mass; // On additionne les masses atomiques de la formule
        }
        console.log(totalMass);       
       document.getElementById('resultat').innerHTML = totalMass;
    } else {
      console.error('La formule est vide!');
    }
});

function getElementValue(valToCheck){
  if(typeof(valToCheck)!='undefined' && valToCheck!=null){
    if(atoms.hasOwnProperty(valToCheck)){
      return atoms[valToCheck];
    }else{
      return 0;
    }
  }
}

0
Shxdely
25 mars 2018 à 23:46
J'ai juste eu le temps de voir si ça fonctionne en pratique mais on dirait pas :/
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mars 2018 à 23:48
J'ai testé et ca marche parfaitement...
As tu regarde dans la console si tu n'aurais pas d'erreur ?
0
Shxdely
Modifié le 25 mars 2018 à 23:57
Bah je n'ai pas réussi à faire fonctionner pour H 2 O
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mars 2018 à 23:53
Heu... D'où vient ce 2 et ce :c. ??
As tu essayé 
H He
0
Réponse 4 / 7
Shxdely
25 mars 2018 à 23:43
dans un premier temps je voulais faire une version simple :/ mais quand j'y repense tu a raison
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 mars 2018 à 23:44
Ce n'est pas assez simple le code que je viens de te donner ?
0
Shxdely
25 mars 2018 à 23:51
Pour quelqu'un qui a fait 3 pauvres cours de js c'est moyen
0

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

Posez votre question
Réponse 5 / 7
Shxdely
25 mars 2018 à 23:57
Ca fonctionnais sans aussi enfaite je voulais juste y intégrer le nombre stœchiométrique : 
Si quelqu'un pouvait m'aider pour intégrer les nombre stœchiométrique ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mars 2018 à 00:03
Mes cours de chimie remontent très loin.... Tu pourrais expliquer ce que c'est sensé faire non ??

Sachant qu'il suffira, à mon avis, de vérifier, dans la boucle, si il s'agit d'un texte ou d'un nombre...et faire le traitement adéquat en fonction....
0
Shxdely
26 mars 2018 à 00:08
Bah en littérale : la masse molaire de 
H2O = M(H)*2+M(O)
H2O = 1*2+16
H2O = 18
0
Shxdely
26 mars 2018 à 00:10
J'arrive pas a mettre le script en entier donc voici le lien : https://pastebin.com/Eex7hyJs
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Shxdely
Modifié le 26 mars 2018 à 00:28
Ben.. je t'ai donné la voir à suivre...
Un if et le tour est joué
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
26 mars 2018 à 00:29
Je regarderai ça demain
0
Réponse 6 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mars 2018 à 19:14
Essaye ça : 

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Atomtom&nana</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <style>
  #resultat{
    font-size: 16px;
    text-align:center:
    padding:10px;
    width:180px;
    background-color:#b0eaac;
  }

</style>
</head>
<body>
<input type="text" id="formula" value="H He">
<input type="button" id="calculate" value="go">
<div id="resultat"></div>

<script type="text/javascript">
var atoms = {
    H: 1.00794,
    He: 4.002602,
    Li: 6.941,
    Be: 9.012182,
    B: 10.811,
    C: 12.011,
    O: 15.9994,
    F: 18.9984032,
    Ne: 20.1797,
    Na: 22.989770,
    Mg: 24.3050,
    Al: 26.981539,
    Si: 28.0855,
    P: 30.973762,
    S: 32.066,
    Cl: 35.4527,
    Ar: 39.948,
    K: 39.0983,
    Ca: 40.078,
    Sc: 44.95591,
    Ti: 47.88,
    V: 50.9415,
    Cr: 51.9961,
    Mn: 54.93805,
    Fe: 55.847,
    Co: 58.9332,
    Ni: 58.69,
    Cu: 63.546,
    Zn: 65.39,
    Rb: 85.4678
};



document.getElementById('calculate').addEventListener('click', () => {
    var previousVal = null;
    var previousValType = null; 
    var totalMass = 0; // On commence par une masse de zéro
        document.getElementById('resultat').innerHTML = "";
        
    var formula = document.getElementById('formula').value;
    console.log('formula :'+formula);
    if (typeof(formula)!='undefined' && formula!=null){
        var splitformula = formula.split(' '); // La formule doit avoir des espaces entres chaque types
            splitformula.reverse(); //on inverse l'ordre de l'array pour faciliter le calcul.
            
        for (var i=0 ; i< splitformula.length;i++){ //on boucle sur la formule
          var F = splitformula[i];
          console.log( i + "==>> F : "+F);
          var Mass = parseFloat(getElementValue(F));  //on va chercher la valeur correspondante
          if(Mass !=null && typeof(Mass)!='undefined' && !isNaN(Mass)){
            //console.log('Mass : '+Mass);
            //console.log('previousVal : ' + previousVal);
            if(previousValType != "stoechio"){
              totalMass += Mass; // On additionne les masses atomiques de la formule
              previousValType = null;
              previousVal = 0;
            }else{
              totalMass += parseFloat(previousVal * Mass);
              previousValType = null;
              previousVal = 0;
            }
          }else if(Number.isInteger(parseInt(F))){ //si par contre c'est un nombre...
              console.log("F est un nombre : " + F);
              previousVal = parseInt(F);
              previousValType = "stoechio";
          }else{
              previousValType = null;
              previousVal = 0;
              console.log("Valeur inconnue ("+F+") : Ce n'et ni un nombre, ni une valeur du tableau connue..");
          }
        }   
       document.getElementById('resultat').innerHTML = totalMass;
    } else {
      alert('La formule est vide!');
    }
});

function getElementValue(valToCheck){
  if(typeof(valToCheck)!='undefined' && valToCheck!=null){
    if(atoms.hasOwnProperty(valToCheck)){
      return atoms[valToCheck];
    }else{
      return null;
    }
  }
}
</script>
</body>
</html>


0
Shxdely
26 mars 2018 à 19:22
Ça fonctionne à merveille
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mars 2018 à 19:23
Tu penseras à mettre le sujet en résolu.
Merci.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
26 mars 2018 à 19:23
Tu noteras que j'ai mis des commentaires et pas mal de console.log histoire que tu comprennes ce que j'ai fait.
0
Shxdely
26 mars 2018 à 19:39
Oui je te remercie je vais de ce pas ^^
0
Shxdely > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
Modifié le 26 mars 2018 à 21:31
Désolé de te déranger encore et encore, je me suis permis de modifier le code un tout petit peu, voici le bout que j'ai ajouté : 

 var formule = document.getElementById('formula').value;
 var formula = ''
 formule.split('').forEach(function(l) {
  formula = formula + ' ' + l;
 });
 formula = formula.substr(1);


J'ai fait ça pour simplifier la saisie de l'utilisateur mais maintenant le script ne prend plus en compte les nombre à plusieurs chiffre :/ sais tu qu'elle partie du code qui est à modifier ?
0
Réponse 7 / 7
kevinhelp
31 janv. 2019 à 01:34
Bonjour je sais pas trop comment ouvrir un autre poste sur ce site alors je vais mettre ma question ici.
Bon voilà j'ai réussi avoir un script pour un jeux de tarot mais je suis pas capable de changer les image des cartes mais juste du début et je demande ou faire et changer la description des cartes sur ce code ou faut que je face un code un autre page en php ou css ce que je suis pas trop bon la dedans.
Voici le code :
<!doctype html>
<html lang="fr">
<head>
<title>Le tirage gratuit de don&voyance : trois cartes</title>
<meta name="description" content="Le tirage gratuit de don&voyance trois cartes, une interprétation personnalisée des 22 lames majeures, profitez des conseils divinatoires du tarot de marseille pour réaliser vos projets"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="cartes.php"></script>
<script>
var changePage;
var fold;
var unfold;
var animateRotate;

$(function() {

/*----------------------------------
----------- PAGE CHANGE ------------
------------------------------------*/
$("*[data-page]").hide();
$("*[data-current-page='true']").show();
changePage = function(content, pageNum) {
$("."+content+"[data-current-page='true']").hide();
$("."+content+"[data-page='"+pageNum+"']").show().attr("data-current-page", "true");
}

/*----------------------------------
--------- ROTATION ANIMATE ---------
------------------------------------*/
animateRotate = function(el, time, it, from, to) {
var span = parseFloat(to) - parseFloat(from);
var step = 25/time;
var newValue = from + (span * $.easing.easeInCubic(step * parseInt(it), it*25, 0, 1, time));

$(el).css("-o-transform", "rotate("+newValue+"deg)");
$(el).css("-moz-transform", "rotate("+newValue+"deg)");
$(el).css("-webkit-transform", "rotate("+newValue+"deg)");
$(el).css("-ms-transform", "rotate("+newValue+"deg)");
if(it*25 < time)
setTimeout("animateRotate('"+el+"', "+time+", "+(parseInt(it)+1)+", "+from+", "+to+")", 25);
}

/*----------------------------------
------------- FOLDING --------------
------------------------------------*/
//additionnal easing effect
$.easing.easeInCubic = function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
};

//for redian to degree conversion
var rad2deg = 57.2957795;
var cardLimit = 22;
var mid = (cardLimit-1)/2

//current selected card, and their position
var current = 0;
var pos = [ [-105, 110] , [0, 110] , [105, 110] , [0, 95, 120, 213]];
var choseCard = [];

//number of created card
fold = function() {
var i = 0;
var moving = false;


function chooseCard(card, last) {
//if we're at the last card, do nothing
if((current == pos.length-1 || moving) && !last)
return;

//just in case it's the last card automatically showed
carte = $(this);
if($(card).hasClass("carte"))
carte = $(card);

if(carte.attr("data-selected") == "true")
return;

//prevent two cards to be fold at the same time
moving = true;

//calculate positions and get widths for later
var cardWidth = 80;//carte.width();
var cardHeight = 142;//carte.height();

var pHeight = carte.parent().height();
var curPos = pos[current++];
var curLeft = curPos[0] - cardWidth/2;
var curTop = pHeight - curPos[1] - cardHeight;

var finPos = pos[pos.length-1];
var finLeft = finPos[0] - finPos[2]/2;
var finTop = pHeight - finPos[1] - 3*cardHeight/2;

//keeps the good ol' card
var oldImage = $("img", carte);

//prevents a card from appearing two or more times
var okay = false;
while(!okay) {
card = Math.floor(Math.random()*cardsImage.length);
okay = true;
for(var k = 0; k < choseCard.length; k++)
if(choseCard[k] == card)
okay = false;
}
choseCard.push(card);

//creates and adds the card to the DOM
var newCard = $("<img />").attr("src", "cartes/"+cardsImage[card]);
carte.prepend(newCard);

//custom rotation because jquery sucks
animateRotate("*[data-number="+carte.attr("data-number")+"]", 300, 0, carte.attr("data-angle"), 0);
//scales the card. We have to scale both image and div because Chrome doesn't support inherit correctly
$("img", carte).animate({
width: finPos[2],
height: finPos[3]
}, "slow");
carte.attr('data-selected', true).css({ zIndex: current }).animate({
left: [finLeft, "easeInCubic"],
bottom: finTop,
width: finPos[2],
height: finPos[3]
}, "slow", null, function() {

carte.addClass("cardSel"+current);
if(!last) {
//shows card and resize it after some time
oldImage.fadeOut('');
eval("setTimeout(function() { $('.cardSel"+current+" img').animate({ width: '80px', height: '142px' }, 'fast'); $('.cardSel"+current+"').animate({ left: "+curLeft+"+'px', bottom: "+curTop+"+'px', width: '80px', height: '142px' }, 'fast', null, function() { if(current < pos.length - 1) moving = false; }); }, 650);");
}
else {
//if it's the last, redesigns the interface...
moveInterface();

}

//if it's the last, chooses a random card
if(current >= pos.length - 1 && !last) {
setTimeout(function() {
moveInterface();
}, 850);
}
});
}

function moveInterface() {

$(".carte[data-selected='true']").fadeOut("slow");

//retrieves the last image
var lastImage = choseCard[0];

$("#confirmLast").fadeIn().empty().css({
font: "13px verdana",
overflow: "auto"
}).html(cardsDescr[lastImage]);

//adds the big image
choseCard.push(lastImage);
var bigImage = $("<img />").attr("id", "bigImage").attr("src", "cartes/"+cardsImage[lastImage]).css({
position: "absolute",
left: "-218px",
top: "80px",
width: "140px",
height: "245px"
});
$("#container").append(bigImage);

$("#moreDatas").fadeIn().append("<h2>"+cardsTitle[lastImage]+"</h2>").append("<p>"+cardsSigni[lastImage]+"</p>");

//adds a start again button
var button = $("<div />").addClass("button").html("Refaire un tirage").click(function() {
window.location.reload();
}).css({
left: "-63px"
});
$("#container").append(button);

var button2;
var button2_1;
var button3;
var button4;

//adds a the switch view button
var button2 = $("<div />").addClass("button").html("Voir les cartes").click(function() {
$("#bigImage, #moreDatas, #confirmLast").fadeOut();
$(".carte[data-selected='true']").fadeIn();
button2_1.fadeIn();
button2.fadeOut();
button3.fadeOut();
button4.fadeOut();
}).css({
position: "absolute",
left: "53px"
});
$("#container").append(button2);
button2_1 = $("<div />").addClass("button").html("Voir les résultats").click(function() {
$("#bigImage, #moreDatas, #confirmLast").fadeIn();
$(".carte[data-selected='true']").fadeOut();
button2_1.fadeOut();
button2.fadeIn();
button3.fadeIn();
button4.fadeIn();
}).css({
position: "absolute",
left: "53px"
}).hide();
$("#container").append(button2_1);

//adds a previous card button
var curCard = 0;
button3 = $("<div />").addClass("button").html("Carte précédente").click(function() {
curCard--;
if(curCard < 0) curCard = choseCard.length-2;
image = choseCard[curCard];
$("#bigImage").attr("src", "cartes/"+cardsImage[image]);
$("#moreDatas h2").html(cardsTitle[image]);
$("#moreDatas p").html(cardsSigni[image]);
$("#confirmLast").html(cardsDescr[image]);

}).css({
left: "-178px"
});
$("#container").append(button3);
//adds a next card button
button4 = $("<div />").addClass("button").html("Carte suivante").click(function() {
curCard++;
if(curCard >= choseCard.length-1) curCard = 0;
image = choseCard[curCard];
$("#bigImage").attr("src", "cartes/"+cardsImage[image]);
$("#moreDatas h2").html(cardsTitle[image]);
$("#moreDatas p").html(cardsSigni[image]);
$("#confirmLast").html(cardsDescr[image]);
}).css({
left: "170px"
});
$("#container").append(button4);

//hides unused cards
$(".carte[data-selected!='true'], .refold").fadeOut("slow");

}

function foldSub() {
//defines top and left position of the new card
var a = (i-mid)/rad2deg - Math.PI/2;
var left = Math.cos(a)*20000/cardLimit;
var bottom = Math.sin(i/(cardLimit-1)*Math.PI)*55 + Math.abs((i-mid));


//randomizes position a bit, to looks more natural
diffL = Math.random()*6-3;
diffT = Math.random()*6-3;

//checks if the card already exists
if(!$(".carte[data-number="+i+"]").length) {
//creates the card's div and gives it its class
var carte = $("<div></div>").attr("data-number", i).addClass("carte");
var img = $("<img />").attr("src", "carte.jpg");
carte.append(img);

//adds the card to the DOM
$("#container").append(carte);

//we want rotation from -10 to +10 before randomizing
var a = (i-mid)
//rotates the card (maybe not working on IE8-)
var angle = (i-mid)*Math.abs(i-mid)/3 + (Math.random()*10-5);
carte.css("-o-transform", "rotate("+angle+"deg)");
carte.css("-moz-transform", "rotate("+angle+"deg)");
carte.css("-webkit-transform", "rotate("+angle+"deg)");
carte.css("-ms-transform", "rotate("+angle+"deg)");
carte.attr("data-angle", angle);


//over effect ...
carte.mouseover(function() {
if($(this).attr("data-selected"))
return;
l = (parseInt($(this).attr("data-number"))-mid) * 2;
t = cardHeight/3 + parseInt($(this).attr("data-number"))-mid;
$(this).animate({
left: "+="+l,
bottom: "+="+t
}, "fast");
});
//...and the out !
carte.mouseout(function() {
if($(this).attr("data-selected"))
return;
l = (parseInt($(this).attr("data-number"))-mid) * 2;
t = cardHeight/3 + parseInt($(this).attr("data-number"))-mid;
$(this).animate({
left: "-="+l,
bottom: "-="+t
}, "fast");
});

//moves the card to the current position
carte.click(chooseCard);

}
else {
//just selects it
carte = $(".carte[data-number="+i+"]");
while(carte.attr("data-selected") == "true")
carte = $(".carte[data-number="+(++i)+"]");
}


//sets card's position, and animates it
var cardWidth = $(carte).width();
var cardHeight = $(carte).height();
carte.css({
bottom: "-200px"
}).animate({
left: (left + diffL - cardWidth/2)+"px",
bottom: (bottom + diffT)+"px"
}, "fast");

//creates a new card if needed
i++;
if(i < cardLimit)
setTimeout(function() { foldSub() }, 50);
}
foldSub();
}

unfold = function(callback) {
var i = 0;
function unfoldSub(callback) {
while($(".carte[data-number="+i+"]").attr("data-selected") == "true") {
i++;
}

$(".carte[data-number="+i+"]").animate({
left: 0,
bottom: "-200px"
}, "fast");

//hide a new card if needed
i++;
if(i < cardLimit)
setTimeout(function() { unfoldSub(callback) }, 50);
else
callback();
}
unfoldSub(callback);
}
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
.page {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizinf: border-box;
position: relative;
width: 470px;
height: 460px;
overflow: hidden;
margin: 0 auto;
padding: 0 20px;

font: 13px Arial;
color: #000;
background: url("fond2.jpg");
}
.default {
background: url("fond.jpg");
}


.button {
width: 100px;
text-align: center;
display: block;
padding: 4px 2px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.90);
color: #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
cursor: pointer;

position: absolute;
bottom: 15px;
left: 50%;
margin-left: -50px;
}

.description {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizinf: border-box;
position: absolute;
top: 120px;
left: 50%;

background: rgba(255, 255, 255, 0.90);
width: 410px;
margin-left: -205px;
padding: 10px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.90);
border-radius: 8px;
}

#confirmLast {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizinf: border-box;
display: none;
cursor: pointer;
position: absolute;
left: -75px;
bottom: 135px;
z-index: 10;
background: rgba(255, 255, 255, 0.90);
padding: 10px;

width: 290px;
height: 100px;
font-size: 13px;
font-family: Verdana;
text-align: justify;
color: #000;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
#confirmLast.finishBloc {
font: 14px verdana;
overflow: auto;
}
#moreDatas {
overflow: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizinf: border-box;
display: none;
cursor: pointer;

position: absolute;
left: -75px;
top: 80px;
z-index: 10;
background: rgba(255, 255, 255, 0.90);
border-radius: 8px;
padding: 10px;

width: 290px;
height: 100px;
font-size: 13px;
font-family: Verdana;
text-align: center;
}
#moreDatas h2 {
margin: 5px 0 10px 0;
font-size: 24px;
font-family: Verdana;
font-style:bold;
text-align: center;
color: #993366;

}

#container {
height: 100%;
position: absolute;
left: 50%;
}
.carte {
position: absolute;
width: 50px;
height: 92px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
.carte img {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 92px;
cursor: pointer;
}
</style>
<!--[if IE]>
<style>
#confirmLast, .description, .button {
background: rgb(255, 255, 255);
}
#moreDatas * {
color: rgb(255, 255, 255);
}
</style>
<![endif]-->
</head>
<body>
<div class="page default" data-page="1" data-current-page="true">
<a class="button" onclick="changePage('page', 2); fold();">Continuer</a>
</div>

<div class="page" data-page="2" data-current-page="false">
<p class="description">
Prenez le bon chemin et évitez les embuches en faisant, dès maintenant, le tirage du tarot de Marseille. Les 22 lames majeures vous révèleront vos obstacles, vos atouts pour réussir votre désir ainsi que votre état d'esprit du moment. <br/>Le tirage gratuit du tarot de Marseille trois cartes s'est adapté à vos besoins pour vous apporter une interprétation rapide, simple et personnalisée des 22 lames majeures, profitez des conseils divinatoires du tarot de marseille pour réaliser vos projets.
</p>
<a class="button" onclick="changePage('page', 3); fold();">Continuer</a>
</div>

<div class="page" data-page="3" data-current-page="false">
<div id="container">
<div id="confirmLast">Cliquez ici pour afficher la dernière carte</div>
<div class="page2" id="moreDatas"></div>
</div>
<a class="button refold" onclick="unfold(function() { setTimeout('fold()', 300) });">Remélanger</a>
</div>

</body>
</html>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
31 janv. 2019 à 08:37
pour créer une nouvelle discussion.... il suffit, lorsque tu es sur le forum
https://forums.commentcamarche.net/forum/javascript-157
de cliquer sur le bouton en haut "posez votre question" ...

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
0

Discussions similaires

exemple de rédaction d'un projet de magasin
TYA2 -
ktm620enduro -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
musique debut project x
warmzire -
LOL -

9 réponses
Musique Du Film "Project X"
AlexiaMartins -
Thibaut -

23 réponses
comment projeter une image sur un mur ?
Saxos07 -
Françou -

17 réponses