Calculatrice simple

Soyez le premier à donner votre avis sur cette source.

Vue 46 343 fois - Téléchargée 5 367 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

<!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>
@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
52
te prend pas trop la tete javascript a la réputation de ne pas être d'une précision imparable en calcule
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
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...
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

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.