1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Fenêtre & Pop-up
  5. Calculatrice simple

Calculatrice simple

Soyez le premier à donner votre avis sur cette source.

Vue 47 526 fois - Téléchargée 5 509 fois

Télécharger le projet
Commenter

Description

Je sais qu'il y a déja des srcipts pour la calculatrice mais celle-ci est plus simple et on peut l'ouvrir dans une pop-up (pour que le visiteur ait toujours la calculatrice sous la main).

Vous devez créer deux pages, une pour la calculatrice (page 1) et l'autre pour ouvrir cet page dans une pop-up (page 2).

Source / Exemple : 


// PAGE 1 ! 

<html>
<head>
<title>Calculatrice Simple</title>

<script language="JavaScript">

function verification(entree) {
  var car ="1234567890[]()+-.*,/";
  for (var i = 0; i < entree.length; i++)
   if (car.indexOf(entree.charAt(i))<0 ) return false;
  return true;
 }

 function calcul() {
   var a = 0;
  if (verification(window.document.calculatrice.result.value))
     a = eval(window.document.calculatrice.result.value);
   window.document.calculatrice.result.value = a;
 }

 function ajouter(caracteres) {
   window.document.calculatrice.result.value =
   window.document.calculatrice.result.value + caracteres;
 }

 function fonction_speciale(fonction) {
   if (verification(window.document.calculatrice.result.value)) {
     if(fonction == "sqrt") {
       var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = Math.sqrt(a);
   }
   if(fonction == "pow") {
     var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = a * a;
   }
   if(fonction == "log") {
     var a = 0;
     a = eval(window.document.calculatrice.result.value);
     window.document.calculatrice.result.value = Math.log(a);
   }
  } else window.document.calculatrice.result.value = 0
}

</script>
</head>
<body>
<table border bgcolor=#0001cc>
<th>
<form name="calculatrice">
<center>
<textarea style="WIDTH: 186px; HEIGHT: 24px; TEXT-ALIGN:right;" name="result" align="right" class="affiche"></textarea><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b2" value="7" onClick="ajouter('7')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b3" value="8" onClick="ajouter('8')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b4" value="9" onClick="ajouter('9')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b12" value=":" onClick="ajouter('/')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b5" value="4" onClick="ajouter('4')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b6" value="5" onClick="ajouter('5')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b7" value="6" onClick="ajouter('6')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b11" value="x" onClick="ajouter('*')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b8" value="1" onClick="ajouter('1')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b9" value="2" onClick="ajouter('2')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b10" value="3" onClick="ajouter('3')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b13" value="-" onClick="ajouter('-')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 92px; HEIGHT: 24px" type="button" name="b14" value="0" onClick="ajouter('0')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b15" value="." onClick="ajouter('.')" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b16" value="+" onClick="ajouter('+')" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 140px; HEIGHT: 24px" type="reset" name="b17" value="ON/C" size="30">
<input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b18" value="=" onClick="calcul()" size="30"><br>
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value="sqrt " onClick="fonction_speciale('sqrt')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" pow " onClick="fonction_speciale('pow')">
<input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" log " onClick="fonction_speciale('log')">
</center>
</form>
</th>
</table>

</body>
</html>

// PAGE 2 !

<html>

<head>
<title>Calculatrice Simple</title>
</head>

<body vlink="#0000FF">

<p><a href="calcul.htm" target="popup"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"
onclick="window.open('','popup','width=218,height=215,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,status=no')">Calculatrice</a>
</p>
</body>
</html>

Conclusion :


Voilà, et puis regardez le fichier zip si vous ne comprennez pas ou si ça ne marche pas
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler

<!DOCTYPE html>
<html>
<head ><title> calculatrice </title>
<meta charset="UTF-8">
<style>
input{font-weight:bold;}
input[type=button]{width:25px;}
input[type=text]{width:103px; text-align:right; padding-right:5px;}
input[type=reset]{width:112px;}
</style>
<script>
var a, b;
var SelectedOp="";
var OpClicked=false;
function entrer(x){
switch (x) {
case '1': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="1";
else document.getElementById("label").value+="1";
break;
case '2': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="2";
else document.getElementById("label").value+="2";
break;
case '3': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="3";
else document.getElementById("label").value+="3";
break;
case '4': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="4";
else document.getElementById("label").value+="4";
break;
case '5': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="5";
else document.getElementById("label").value+="5";
break;
case '6': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="6";
else document.getElementById("label").value+="6";
break;
case '7': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="7";
else document.getElementById("label").value+="7";
break;
case '8': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="8";
else document.getElementById("label").value+="8";
break;
case '9': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="9";
else document.getElementById("label").value+="9";
break;
case '0': if (document.getElementById("label").value=="0" || OpClicked==true) document.getElementById("label").value="0";
else document.getElementById("label").value+="0";
break;
case '.': document.getElementById(".").disabled=true;
document.getElementById("label").value+=".";
break;

}
OpClicked=false;
}

function faire(x){
document.getElementById(".").disabled=false;
OpClicked=true;
SelectedOp=x;
a=document.getElementById("label").value;
}

function calculer(){
var b=document.getElementById("label").value;
switch (SelectedOp) {
case '+': document.getElementById("label").value=parseFloat(a)+parseFloat(b); break;
case '-': document.getElementById("label").value=parseFloat(a)-parseFloat(b); break;
case '*': document.getElementById("label").value=parseFloat(a)*parseFloat(b); break;
case '/': if (b!=0) document.getElementById("label").value=parseFloat(a)/parseFloat(b);
else document.getElementById("label").value="impossible sur 0 !";
break;
}
SelectedOp="";
}

</script>
</head>

<body>
<form>
<input type="text" value="0" id="label" readonly > <br/>
<input type="button" value="1" id="1" onclick="entrer('1');">
<input type="button" value="2" id="2" onclick="entrer('2');">
<input type="button" value="3" id="3" onclick="entrer('3');">
<input type="button" value="+" id="+" onclick="faire('+');"><br/>
<input type="button" value="4" id="4" onclick="entrer('4');">
<input type="button" value="5" id="5" onclick="entrer('5');">
<input type="button" value="6" id="6" onclick="entrer('6');">
<input type="button" value="-" id="-" onclick="faire('-');"><br/>
<input type="button" value="7" id="7" onclick="entrer('7');">
<input type="button" value="8" id="8" onclick="entrer('8');">
<input type="button" value="9" id="9" onclick="entrer('9');">
<input type="button" value="*" id="*" onclick="faire('*');"><br/>
<input type="button" value="0" id="0" onclick="entrer('0');">
<input type="button" value="." id="." onclick="entrer('.');">
<input type="button" value="=" id="=" onclick="calculer();">
<input type="button" value="/" id="/" onclick="faire('/');"><br/>
<input type="reset" value="C">
</form>
</body>
</html>
Signaler
@karamel
Messages postés
1749
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
9 mars 2020
 54
te prend pas trop la tete javascript a la réputation de ne pas être d'une précision imparable en calcule
Signaler
meryem480
Messages postés
1
Date d'inscription
mercredi 25 octobre 2006
Statut
Membre
Dernière intervention
25 octobre 2006
mon problème c'est avec 12,2,5*/25 ; ça existe pas mais il faut faire
un contrôleur de virgule
je veu un resultat
Signaler
Nono8379
Messages postés
6
Date d'inscription
samedi 10 janvier 2004
Statut
Membre
Dernière intervention
4 juillet 2006
http://www.thescripts.com/forum/thread91162.html

en gros (tres gros...) c'est lié à la représentation des chiffres dans javascript. Donc çà va être difficile d'utiliser directement la fonction eval si tu veux un résultat précis...
Signaler
cs_lgh
Messages postés
41
Date d'inscription
vendredi 23 mai 2003
Statut
Membre
Dernière intervention
8 avril 2009
Le problème existe aussi avec 12,99+11; la seule solution que j'ai trouvée est d'arrondir, mais cela ne résoud pas tous les problèmes. Qui résoudra ce casse tête ?
LGH
Afficher les 9 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (nexan44)