Menu

Besoin d'aide pour un projet en javascript [Résolu/Fermé]

- - Dernière réponse : jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
- 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;
}
Afficher la suite 

7 réponses

Meilleure réponse
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857
1
Merci
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>

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 56682 internautes nous ont dit merci ce mois-ci

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
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
Merci
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 ?
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
Pourquoi boucler sur atom alors ue je t'ai donné une fonction (getElementValue) ?
C'est sur fotmula que tu dois faire ta boucle...
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857
0
Merci
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;
    }
  }
}

J'ai juste eu le temps de voir si ça fonctionne en pratique mais on dirait pas :/
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
J'ai testé et ca marche parfaitement...
As tu regarde dans la console si tu n'aurais pas d'erreur ?
Bah je n'ai pas réussi à faire fonctionner pour H 2 O
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
Heu... D'où vient ce 2 et ce :c. ??
As tu essayé
H He
0
Merci
dans un premier temps je voulais faire une version simple :/ mais quand j'y repense tu a raison
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
Ce n'est pas assez simple le code que je viens de te donner ?
Pour quelqu'un qui a fait 3 pauvres cours de js c'est moyen
0
Merci
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 ? 
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 > jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
-
Je regarderai ça demain
> jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
-
Si tu pouvais me tenir au courant si tu réussi ^^
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 > Shxdely -
Ben non... je le garderai pour moi ....
> jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
-
Je comprends
J'arrive pas a mettre le script en entier donc voici le lien : https://pastebin.com/Eex7hyJs
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857
0
Merci
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>


jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
Et tu reconnais comment ceux qui ont deux lettres... Comme He par exemple.. ???
Ah... en effet je me disait bien que c'était un peut trop facile pour camoufler l'envers du décor...
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
A la limite tu pourrais essayer de faire le SPLIT sur les lettre majuscules.

Regarde donc ce que donnes ceci ..
var strToSplit = "H2OHe3";
     var splitStr = strToSplit.split(/(?=[A-Z]|\d)/);
     console.log(splitStr);


Et donc, dans le code que je t'ai donné, il te suffit de remplacer la ligne :
 var splitformula = formula.split(' ');

par:
//on vire les éventuels espaces au cas où la personne aurait écrit : H 2 O He 3
 formula= formula.replace(/ /g,''); 

//on split sur les majuscules + les chiffres (ne fonctionne qu'avec des nombre <10 )
 var splitformula = formula.split(/(?=[A-Z]|\d)/);
Thx mais si ça ne va pas fonctionner pour des nombre >10 autant rester sur la "vesion" de base ?
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 > Shxdely -
Ben... c'est toi qui voit.
après..je t'ai donné un bon coup de pouce pour démarrer ton projet... À toi de le faire évoluer.

N'oublie pas de mettre le sujet en résolu.
0
Merci
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>
jordane45
Messages postés
24625
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
1857 -
pour créer une nouvelle discussion.... il suffit, lorsque tu es sur le forum
https://www.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
.